svseeds 0.0.2 → 0.0.6

package/README.md

@@ -1,56 +1,5 @@
-# svseeds - the SvSeeds CLI
-A CLI to copy SvSeeds components for Svelte.
+# Svelte components as svelte file
 
-## Quick Start
-```
-npx svseeds
-```
+Simple headless Svelte components as Svelte files.
 
-## Basic Usage
-Copy specified SvSeeds files.
-```
-npx svseeds [components...]
-```
-
-## Main Options
-- Specify directory:
-```
-npx svseeds -d <directory> [components...]
-```
-
-- Specify all components:
-```
-npx svseeds -a
-```
-
-- Update copied components:
-```
-npx svseeds -u [components...]
-```
-
-- Remove components:
-```
-npx svseeds -r [components...]
-```
-(Of course, the components are just a file, you can use `rm` command instead.)
-
-- Run without interactions:
-```
-npx svseeds --no-confirm [components...]
-```
-
-## Other Options
-- Remove all components:
-```
-npx svseeds --uninstall
-```
-
-- Copy without overwrite
-```
-npx svseeds --no-overwrite [components...]
-```
-
-- Copy without `_style.ts` file
-```
-npx svseeds --no-style [components...]
-```
+**WIP**

package/_svseeds/_TextField.svelte

@@ -0,0 +1,144 @@
+<script module lang="ts">
+  export type TextFieldProps = {
+    label?: string,
+    extra?: string,
+    aux?: Snippet<[string, StateName, HTMLInputElement | HTMLTextAreaElement | undefined]>,   // Snippet<[value,status,element]>
+    left?: Snippet<[string, StateName, HTMLInputElement | HTMLTextAreaElement | undefined]>,  // Snippet<[value,status,element]>
+    right?: Snippet<[string, StateName, HTMLInputElement | HTMLTextAreaElement | undefined]>, // Snippet<[value,status,element]>
+    bottom?: string,  // bindable
+    value?: string,  // bindable, [""]
+    type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url" | "number",  // bindable, ["text"]
+    options?: string[],  // bindable
+    status?: StateName,  // bindable, [STATE.DEFAULT]
+    validations?: ((value: string, validity?: ValidityState) => string)[],
+    style?: ClassRuleSet | string,
+    attributes?: HTMLInputAttributes & HTMLTextareaAttributes,
+    action?: Action,
+    element?: HTMLInputElement | HTMLTextAreaElement,  // bindable
+  };
+
+  const seed = "text-field";
+  const preset: ClassRuleSet = {};
+
+  type TextFieldEvent = Event & { currentTarget: EventTarget & HTMLInputElement & HTMLTextAreaElement; };
+  import { type Snippet } from "svelte";
+  import { type Action } from "svelte/action";
+  import { type HTMLInputAttributes, type HTMLTextareaAttributes } from "svelte/elements";
+  import { type ClassRuleSet, type StateName, STATE, AREA, elemId, getClassFn, isUndef, omit } from "./core";
+</script>
+
+<script lang="ts">
+  let { label, extra, aux, left, right, bottom = $bindable(), value = $bindable(""), type = $bindable("text"), options = $bindable(), status = $bindable(STATE.DEFAULT), validations = [], style = {}, attributes = {}, action, element = $bindable() }: TextFieldProps = $props();
+
+  // *** Initialize *** //
+  const cls = getClassFn(seed, preset, style);
+  const id = !isUndef(attributes.id) ? attributes.id : elemId.get(label);
+  const idLabel = elemId.get(label?.trim());
+  const idDesc = elemId.get(bottom?.trim());
+  const idList = elemId.get(Array.isArray(options));
+  const idErr = isUndef(idDesc) ? elemId.get(true) : idDesc;
+  const attrs = omit({ ...attributes }, "class", "id", "type", "value", "list", "onchange", "oninput", "oninvalid");
+  const description = bottom;
+
+  // *** Status *** //
+  let role = $derived(isInvalid() ? "alert" : undefined);
+  let invalid = $derived(isInvalid() ? true : undefined);
+  let errMsg = $derived(isInvalid() ? idErr : undefined);
+  function isInvalid() { return status === STATE.INACTIVE && !isUndef(bottom); }
+  function toInvalid(msg?: string) { shiftStatus(STATE.INACTIVE, msg); }
+  function toNonInvalid(stat: StateName) { shiftStatus(stat); }
+  function shiftStatus(stat: StateName, msg?: string) {
+    status = stat;
+    bottom = msg ?? description;
+    element?.setCustomValidity(msg ?? "");
+  }
+  function validate(onchange?: boolean) {
+    if (!value && onchange) return toNonInvalid(STATE.DEFAULT);
+    for (let i = 0; i < validations.length; i++) {
+      const msg = validations[i](value, element?.validity);
+      if (msg) return toInvalid(msg);
+    }
+    toNonInvalid(STATE.ACTIVE);
+  }
+
+  // *** Event Handlers *** //
+  // const debounceValidate = debounce(300, validate);
+  function onchange(ev: Event) {
+    attributes.onchange?.(ev as TextFieldEvent);
+    validate(true);
+  }
+  function oninput(ev: Event) {
+    attributes.oninput?.(ev as TextFieldEvent);
+    if (status === STATE.DEFAULT) return;
+    validate();  // debounceValidate();
+  }
+  function oninvalid(ev: Event) {
+    attributes.oninvalid?.(ev as TextFieldEvent);
+    validate();
+    if (status !== STATE.INACTIVE) toInvalid(element?.validationMessage);
+  }
+</script>
+
+<!---------------------------------------->
+
+<div class={cls(AREA.WHOLE, status)} role="group" aria-labelledby={idLabel}>
+  {#if typeof aux === "function"}
+    <div class={cls(AREA.TOP, status)}>
+      {@render lbl()}
+      {#if typeof aux === "function"}
+        <span class={cls(AREA.AUX, status)}>{@render aux(value, status, element)}</span>
+      {/if}
+    </div>
+  {:else}
+    {@render lbl()}
+  {/if}
+  {#if typeof left === "function" || typeof right === "function"}
+    <div class={cls(AREA.MIDDLE, status)}>
+      {#if typeof left === "function"}
+        <span class={cls(AREA.LEFT, status)}>{@render left(value, status, element)}</span>
+      {/if}
+      {@render main()}
+      {#if typeof right === "function"}
+        <span class={cls(AREA.RIGHT, status)}>{@render right(value, status, element)}</span>
+      {/if}
+    </div>
+  {:else}
+    {@render main()}
+  {/if}
+  {#if bottom?.trim()}
+    <output class={cls(AREA.BOTTOM, status)} id={idDesc ?? idErr} {role}>{bottom}</output>
+  {/if}
+</div>
+
+{#snippet lbl()}
+  {#if label?.trim()}
+    <label class={cls(AREA.LABEL, status)} for={id} id={idLabel}>
+      {label}
+      {#if extra?.trim()}
+        <span class={cls(AREA.EXTRA, status)}>{extra}</span>
+      {/if}
+    </label>
+  {/if}
+{/snippet}
+{#snippet main()}
+  {#if type === "area"}
+    {#if typeof action === "function"}
+      <textarea bind:value bind:this={element} class={cls(AREA.MAIN, status)} {id} {onchange} {oninput} {oninvalid} {...attrs} use:action aria-describedby={idDesc} aria-controls={idDesc} aria-invalid={invalid} aria-errormessage={errMsg}></textarea>
+    {:else}
+      <textarea bind:value bind:this={element} class={cls(AREA.MAIN, status)} {id} {onchange} {oninput} {oninvalid} {...attrs} aria-describedby={idDesc} aria-controls={idDesc} aria-invalid={invalid} aria-errormessage={errMsg}></textarea>
+    {/if}
+  {:else}
+    {#if typeof action === "function"}
+      <input bind:value bind:this={element} class={cls(AREA.MAIN, status)} list={idList} {id} {type} {onchange} {oninput} {oninvalid} {...attrs} use:action aria-describedby={idDesc} aria-controls={idDesc} aria-invalid={invalid} aria-errormessage={errMsg} />
+    {:else}
+      <input bind:value bind:this={element} class={cls(AREA.MAIN, status)} list={idList} {id} {type} {onchange} {oninput} {oninvalid} {...attrs} aria-describedby={idDesc} aria-controls={idDesc} aria-invalid={invalid} aria-errormessage={errMsg} />
+    {/if}
+    {#if Array.isArray(options) && options.length > 0}
+      <datalist id={idList}>
+        {#each options as option (option)}
+          <option value={option}></option>
+        {/each}
+      </datalist>
+    {/if}
+  {/if}
+{/snippet}

package/_svseeds/_TextField.svelte.d.ts

@@ -0,0 +1,24 @@
+export type TextFieldProps = {
+    label?: string;
+    extra?: string;
+    aux?: Snippet<[string, StateName, HTMLInputElement | HTMLTextAreaElement | undefined]>;
+    left?: Snippet<[string, StateName, HTMLInputElement | HTMLTextAreaElement | undefined]>;
+    right?: Snippet<[string, StateName, HTMLInputElement | HTMLTextAreaElement | undefined]>;
+    bottom?: string;
+    value?: string;
+    type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url" | "number";
+    options?: string[];
+    status?: StateName;
+    validations?: ((value: string, validity?: ValidityState) => string)[];
+    style?: ClassRuleSet | string;
+    attributes?: HTMLInputAttributes & HTMLTextareaAttributes;
+    action?: Action;
+    element?: HTMLInputElement | HTMLTextAreaElement;
+};
+import { type Snippet } from "svelte";
+import { type Action } from "svelte/action";
+import { type HTMLInputAttributes, type HTMLTextareaAttributes } from "svelte/elements";
+import { type ClassRuleSet, type StateName } from "./core";
+declare const TextField: import("svelte").Component<TextFieldProps, {}, "type" | "bottom" | "value" | "options" | "status" | "element">;
+type TextField = ReturnType<typeof TextField>;
+export default TextField;

package/_svseeds/core.d.ts

@@ -0,0 +1,47 @@
+export { type StateName, type AreaName, type ClassRule, type ClassRuleSet, type ThemePreset, CONST, STATE, AREA, elemId, theme, getClassFn, isUndef, omit, debounce, throttle, };
+type valueof<T> = T[keyof T];
+type StateName = valueof<typeof STATE>;
+type AreaName = valueof<typeof AREA>;
+type ClassRule = Partial<Record<StateName | typeof CONST, string>>;
+type ClassRuleSet = Partial<Record<AreaName, ClassRule>>;
+type CssVarSet = Record<string, string>;
+type ThemePreset = Record<string, CssVarSet>;
+declare const CONST = "constant";
+declare const STATE: Readonly<{
+    DEFAULT: "default";
+    ACTIVE: "active";
+    INACTIVE: "inactive";
+}>;
+declare const AREA: Readonly<{
+    WHOLE: "whole";
+    MIDDLE: "middle";
+    MAIN: "main";
+    TOP: "top";
+    LEFT: "left";
+    RIGHT: "right";
+    BOTTOM: "bottom";
+    LABEL: "label";
+    AUX: "aux";
+    EXTRA: "extra";
+}>;
+declare class RandomId {
+    #private;
+    get(v: unknown): string | undefined;
+}
+declare class ThemeSwitcher {
+    #private;
+    get current(): string;
+    constructor();
+    setPreset(preset: ThemePreset): ThemeSwitcher;
+    toLight(): void;
+    toDark(): void;
+    switch(theme: string): void;
+}
+declare const elemId: RandomId;
+declare const theme: ThemeSwitcher;
+type ClassFn = (area: AreaName, status: StateName) => string | undefined;
+declare function getClassFn(name: string, preset: ClassRuleSet, style: ClassRuleSet | string): ClassFn;
+declare function isUndef(v: unknown): boolean;
+declare function omit<T extends Record<string, unknown>, K extends keyof T>(obj: T, ...keys: K[]): Omit<T, K>;
+declare function debounce<Args extends unknown[], R>(delay: number, fn: (...args: Args) => R): (...args: Args) => void;
+declare function throttle<Args extends unknown[], R>(interval: number, fn: (...args: Args) => R): (...args: Args) => void;

package/_svseeds/core.js

@@ -0,0 +1,172 @@
+// deno-fmt-ignore
+export { CONST, STATE, AREA, elemId, theme, getClassFn, isUndef, omit, debounce, throttle, };
+const CONST = "constant";
+const STATE = Object.freeze({ DEFAULT: "default", ACTIVE: "active", INACTIVE: "inactive" });
+const AREA = Object.freeze({
+    WHOLE: "whole",
+    MIDDLE: "middle",
+    MAIN: "main",
+    TOP: "top",
+    LEFT: "left",
+    RIGHT: "right",
+    BOTTOM: "bottom",
+    LABEL: "label",
+    AUX: "aux",
+    EXTRA: "extra",
+});
+class RandomId {
+    static #ALPHABETIC = [...Array.from(Array(25).keys(), (x) => x + 65), ...Array.from(Array(25).keys(), (x) => x + 97)];
+    #store = new Set();
+    get(v) {
+        if (!v)
+            return;
+        if (this.#store.size > 10000)
+            this.#store.clear();
+        return this.#add();
+    }
+    #char() {
+        return RandomId.#ALPHABETIC[Math.trunc(Math.random() * RandomId.#ALPHABETIC.length)];
+    }
+    #gen() {
+        return String.fromCharCode(...Array(4).fill(null).map(() => this.#char()), 58);
+    }
+    #add() {
+        let id = this.#gen();
+        while (this.#store.has(id)) {
+            id = this.#gen();
+        }
+        this.#store.add(id);
+        return id;
+    }
+}
+class ThemeSwitcher {
+    static #DARK = "dark";
+    static #LIGHT = "light";
+    #styles = {};
+    #current;
+    get current() {
+        return this.#current;
+    }
+    constructor() {
+        this.#current = ThemeSwitcher.#setInitialTheme();
+    }
+    setPreset(preset) {
+        this.#styles = ThemeSwitcher.#toCSSVarName(preset);
+        this.#setColorScheme();
+        return this;
+    }
+    toLight() {
+        this.switch(ThemeSwitcher.#LIGHT);
+    }
+    toDark() {
+        this.switch(ThemeSwitcher.#DARK);
+    }
+    switch(theme) {
+        if (!this.#exists(theme))
+            return;
+        this.#current = theme;
+        this.#apply();
+    }
+    #apply() {
+        if (!window)
+            return;
+        const style = window.document.body.style;
+        Object.entries(this.#styles[this.#current])
+            .forEach(([name, value]) => style.setProperty(name, value));
+    }
+    #exists(theme) {
+        return Object.keys(this.#styles).includes(theme);
+    }
+    #setColorScheme() {
+        if (!window)
+            return;
+        const themes = Object.keys(this.#styles).filter((x) => x === ThemeSwitcher.#LIGHT || x === ThemeSwitcher.#DARK);
+        window.document.documentElement.style.colorScheme = themes.join(" ");
+    }
+    static #toCSSVarName(styles) {
+        return Object.fromEntries(Object.entries(styles)
+            .map(([theme, obj]) => [theme, ThemeSwitcher.#renameProperties(obj)]));
+    }
+    static #renameProperties(obj) {
+        return Object.fromEntries(Object.entries(obj)
+            .map(([name, value]) => [`--${name.replaceAll("_", "-")}`, value]));
+    }
+    static #setInitialTheme() {
+        return window?.matchMedia("(prefers-color-scheme: light)").matches ? ThemeSwitcher.#LIGHT : ThemeSwitcher.#DARK;
+    }
+}
+const elemId = new RandomId();
+const theme = new ThemeSwitcher();
+function getClassFn(name, preset, style) {
+    const rule = getRule(name, preset, style);
+    if (typeof rule === "string") {
+        return (area, status) => cssClass(rule, area, status);
+    }
+    else {
+        return (area, status) => ruleClass(rule, area, status);
+    }
+}
+function getRule(name, preset, style) {
+    if (typeof style === "string")
+        return style.trim() ? style : name;
+    const rule = mergeRule(preset, style);
+    return Object.keys(rule).length <= 0 ? name : rule;
+}
+function cssClass(name, area, status) {
+    return `${name} ${area}${status === STATE.DEFAULT ? "" : ` ${status}`}`;
+}
+function ruleClass(rule, area, status) {
+    const constant = rule[area]?.constant ?? "";
+    const dynamic = rule[area]?.[status] ?? rule[area]?.default ?? "";
+    return constant === "" && dynamic === "" ? undefined : `${constant}${constant && dynamic ? " " : ""}${dynamic}`;
+}
+function mergeRule(preset, style) {
+    const presetKeys = Object.keys(preset);
+    if (presetKeys.length <= 0)
+        return style;
+    const styleKeys = Object.keys(style);
+    if (styleKeys.length <= 0)
+        return preset;
+    const result = {};
+    new Set([...presetKeys, ...styleKeys]).forEach((key) => {
+        result[key] = { ...preset[key] ?? {}, ...style[key] ?? {} };
+    });
+    return result;
+}
+function isUndef(v) {
+    return v === void 0;
+}
+function omit(obj, ...keys) {
+    if (Object.isFrozen(obj) || Object.isSealed(obj))
+        return obj;
+    keys.forEach((key) => delete obj[key]);
+    return obj;
+}
+function debounce(delay, fn) {
+    let timer;
+    return (...args) => {
+        if (timer)
+            clearTimeout(timer);
+        timer = setTimeout(() => {
+            fn.call(null, ...args);
+        }, delay);
+    };
+}
+function throttle(interval, fn) {
+    let timer;
+    let last = 0;
+    const elapsed = () => Date.now() - last;
+    const run = (args) => {
+        fn.call(null, ...args);
+        last = Date.now();
+    };
+    return (...args) => {
+        if (!last)
+            return run(args);
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            if (elapsed() >= interval)
+                run(args);
+        }, interval - elapsed());
+    };
+}

package/_svseeds/core.ts

@@ -0,0 +1,194 @@
+// deno-fmt-ignore
+export {
+  type StateName,
+  type AreaName,
+  type ClassRule,
+  type ClassRuleSet,
+  type ThemePreset,
+  CONST,
+  STATE,
+  AREA,
+  elemId,
+  theme,
+  getClassFn,
+  isUndef,
+  omit,
+  debounce,
+  throttle,
+};
+
+type valueof<T> = T[keyof T];
+type StateName = valueof<typeof STATE>;
+type AreaName = valueof<typeof AREA>;
+type ClassRule = Partial<Record<StateName | typeof CONST, string>>;
+type ClassRuleSet = Partial<Record<AreaName, ClassRule>>;
+type CssVarSet = Record<string, string>;
+type ThemePreset = Record<string, CssVarSet>;
+
+const CONST = "constant";
+const STATE = Object.freeze({ DEFAULT: "default", ACTIVE: "active", INACTIVE: "inactive" });
+const AREA = Object.freeze({
+  WHOLE: "whole",
+  MIDDLE: "middle",
+  MAIN: "main",
+  TOP: "top",
+  LEFT: "left",
+  RIGHT: "right",
+  BOTTOM: "bottom",
+  LABEL: "label",
+  AUX: "aux",
+  EXTRA: "extra",
+});
+
+class RandomId {
+  static #ALPHABETIC = [...Array.from(Array(25).keys(), (x) => x + 65), ...Array.from(Array(25).keys(), (x) => x + 97)];
+  #store = new Set<string>();
+
+  get(v: unknown): string | undefined {
+    if (!v) return;
+    if (this.#store.size > 10000) this.#store.clear();
+    return this.#add();
+  }
+  #char(): number {
+    return RandomId.#ALPHABETIC[Math.trunc(Math.random() * RandomId.#ALPHABETIC.length)];
+  }
+  #gen(): string {
+    return String.fromCharCode(...Array(4).fill(null).map(() => this.#char()), 58);
+  }
+  #add(): string {
+    let id = this.#gen();
+    while (this.#store.has(id)) {
+      id = this.#gen();
+    }
+    this.#store.add(id);
+    return id;
+  }
+}
+class ThemeSwitcher {
+  static #DARK = "dark";
+  static #LIGHT = "light";
+  #styles: ThemePreset = {};
+  #current;
+  get current() {
+    return this.#current;
+  }
+
+  constructor() {
+    this.#current = ThemeSwitcher.#setInitialTheme();
+  }
+  setPreset(preset: ThemePreset): ThemeSwitcher {
+    this.#styles = ThemeSwitcher.#toCSSVarName(preset);
+    this.#setColorScheme();
+    return this;
+  }
+  toLight() {
+    this.switch(ThemeSwitcher.#LIGHT);
+  }
+  toDark() {
+    this.switch(ThemeSwitcher.#DARK);
+  }
+  switch(theme: string) {
+    if (!this.#exists(theme)) return;
+    this.#current = theme;
+    this.#apply();
+  }
+  #apply() {
+    if (!window) return;
+    const style = window.document.body.style;
+    Object.entries(this.#styles[this.#current])
+      .forEach(([name, value]) => style.setProperty(name, value));
+  }
+  #exists(theme: string): boolean {
+    return Object.keys(this.#styles).includes(theme);
+  }
+  #setColorScheme() {
+    if (!window) return;
+    const themes = Object.keys(this.#styles).filter((x) => x === ThemeSwitcher.#LIGHT || x === ThemeSwitcher.#DARK);
+    window.document.documentElement.style.colorScheme = themes.join(" ");
+  }
+
+  static #toCSSVarName(styles: ThemePreset): ThemePreset {
+    return Object.fromEntries(
+      Object.entries(styles)
+        .map(([theme, obj]) => [theme, ThemeSwitcher.#renameProperties(obj)]),
+    ) as ThemePreset;
+  }
+  static #renameProperties(obj: Record<string, string>): CssVarSet {
+    return Object.fromEntries(
+      Object.entries(obj)
+        .map(([name, value]) => [`--${name.replaceAll("_", "-")}`, value]),
+    );
+  }
+  static #setInitialTheme(): string {
+    return window?.matchMedia("(prefers-color-scheme: light)").matches ? ThemeSwitcher.#LIGHT : ThemeSwitcher.#DARK;
+  }
+}
+const elemId = new RandomId();
+const theme = new ThemeSwitcher();
+
+type ClassFn = (area: AreaName, status: StateName) => string | undefined;
+function getClassFn(name: string, preset: ClassRuleSet, style: ClassRuleSet | string): ClassFn {
+  const rule = getRule(name, preset, style);
+  if (typeof rule === "string") {
+    return (area: AreaName, status: StateName) => cssClass(rule, area, status);
+  } else {
+    return (area: AreaName, status: StateName) => ruleClass(rule, area, status);
+  }
+}
+function getRule(name: string, preset: ClassRuleSet, style: ClassRuleSet | string): ClassRuleSet | string {
+  if (typeof style === "string") return style.trim() ? style : name;
+  const rule = mergeRule(preset, style);
+  return Object.keys(rule).length <= 0 ? name : rule;
+}
+function cssClass(name: string, area: AreaName, status: StateName): string {
+  return `${name} ${area}${status === STATE.DEFAULT ? "" : ` ${status}`}`;
+}
+function ruleClass(rule: ClassRuleSet, area: AreaName, status: StateName): string | undefined {
+  const constant = rule[area]?.constant ?? "";
+  const dynamic = rule[area]?.[status] ?? rule[area]?.default ?? "";
+  return constant === "" && dynamic === "" ? undefined : `${constant}${constant && dynamic ? " " : ""}${dynamic}`;
+}
+function mergeRule(preset: ClassRuleSet, style: ClassRuleSet): ClassRuleSet {
+  const presetKeys = Object.keys(preset) as AreaName[];
+  if (presetKeys.length <= 0) return style;
+  const styleKeys = Object.keys(style) as AreaName[];
+  if (styleKeys.length <= 0) return preset;
+  const result: ClassRuleSet = {};
+  new Set([...presetKeys, ...styleKeys]).forEach((key) => {
+    result[key] = { ...preset[key] ?? {}, ...style[key] ?? {} };
+  });
+  return result;
+}
+function isUndef(v: unknown): boolean {
+  return v === void 0;
+}
+function omit<T extends Record<string, unknown>, K extends keyof T>(obj: T, ...keys: K[]): Omit<T, K> {
+  if (Object.isFrozen(obj) || Object.isSealed(obj)) return obj;
+  keys.forEach((key) => delete obj[key]);
+  return obj;
+}
+function debounce<Args extends unknown[], R>(delay: number, fn: (...args: Args) => R): (...args: Args) => void {
+  let timer: number | undefined;
+  return (...args: Args) => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.call(null, ...args);
+    }, delay);
+  };
+}
+function throttle<Args extends unknown[], R>(interval: number, fn: (...args: Args) => R): (...args: Args) => void {
+  let timer: number | undefined;
+  let last: number = 0;
+  const elapsed = () => Date.now() - last;
+  const run = (args: Args) => {
+    fn.call(null, ...args);
+    last = Date.now();
+  };
+  return (...args: Args) => {
+    if (!last) return run(args);
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      if (elapsed() >= interval) run(args);
+    }, interval - elapsed());
+  };
+}

package/_svseeds/dep.json

@@ -0,0 +1 @@
+{"components":{"_TextField.svelte":{"dependencies":[]}}}

package/index.d.ts

@@ -0,0 +1 @@
+export { default as TextField } from "./_svseeds/_TextField.svelte";

package/index.js

@@ -1,2 +1 @@
-import { main } from "./dist/main.js";
-main();
+export { default as TextField } from "./_svseeds/_TextField.svelte";

package/package.json

@@ -1,42 +1,38 @@
 {
-	"name": "svseeds",
-	"version": "0.0.2",
-	"description": "A CLI to copy SvSeeds components.",
-	"type": "module",
-	"exports": "./index.js",
-	"files": [
-		"dist/**/*",
-		"index.js"
-	],
-	"keywords": [
-		"svelte",
-		"headless",
-		"components",
-		"cli"
-	],
-	"author": "scirexs",
-	"license": "MIT",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/scirexs/svseeds-cli-node.git"
-	},
-	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1",
-		"lint": "eslint .",
-		"format": "eslint --fix ."
-	},
-	"devDependencies": {
-		"@eslint/js": "^9.21.0",
-		"@stylistic/eslint-plugin": "^4.2.0",
-		"@types/node": "^22.13.9",
-		"eslint": "^9.21.0",
-		"globals": "^16.0.0",
-		"typescript": "^5.8.2",
-		"typescript-eslint": "^8.26.0"
-	},
-	"dependencies": {
-		"@clack/prompts": "^0.10.0",
-		"commander": "^13.1.0",
-		"tar": "^7.4.3"
-	}
+  "name": "svseeds",
+  "version": "0.0.6",
+  "description": "Simple headless Svelte components.",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "svelte": "./index.js"
+    }
+  },
+  "svelte": "./index.js",
+  "files": [
+    "_svseeds",
+    "index.js",
+    "index.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "svelte",
+    "headless",
+    "components",
+    "ui"
+  ],
+  "author": "scirexs",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/scirexs/svseeds-ui.git"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
 }