svseeds 0.0.1 → 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.1",
-	"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"
+  }
 }

package/dist/main.js

@@ -1,271 +0,0 @@
-#!/usr/bin/env node
-import path from "node:path";
-import fs from "node:fs/promises";
-import { readdirSync } from "node:fs";
-import { execSync, exec } from "node:child_process";
-import { promisify } from "node:util";
-import { program } from "commander";
-import { x } from "tar";
-import * as p from "@clack/prompts";
-import pkg from "../package.json" with { type: "json" };
-const CANCEL_CODE = -1;
-const ui = {
-    package: "@scirexs/svseeds-ui",
-    tar: "scirexs-svseeds-ui",
-    dir: "_svseeds",
-    tmp: "tmp_svseeds_",
-    ext: ".svelte",
-    prefix: "_",
-    core: "__core.ts",
-    style: "__style.ts",
-};
-const defaultPath = path.join("src", "lib", ui.dir);
-program
-    .version(pkg.version)
-    .argument("[components...]", "Target component names")
-    .option("-d, --dir <directory>", "Directory path of components", defaultPath)
-    .option("-a, --all", "Copy all components", false)
-    .option("-u, --update", "Update mode", false)
-    .option("-r, --remove", "Remove mode", false)
-    .option("--uninstall", "Remove all components", false)
-    .option("--no-confirm", "Skip interactions")
-    .option("--no-overwrite", "Does not overwrite if exists")
-    .option("--no-style", "Exclude copy of __style.ts file");
-export async function main() {
-    p.intro("SvSeeds Collector");
-    let exitCode = 0;
-    let tmp = "";
-    const opts = program.parse(process.argv).opts();
-    opts.components = program.args;
-    opts.copy = !opts.update && !opts.remove && !opts.uninstall;
-    try {
-        const dest = await getDestinationProcess(opts.dir, opts.confirm);
-        if (!opts.copy && !await isExists(dest))
-            throw new Error("target directory is not exists");
-        tmp = await fs.mkdtemp(ui.tmp).catch();
-        if (!tmp)
-            throw new Error("failed to create temporary directory");
-        const src = await downloadProcess(tmp);
-        const avails = getAvailables(src);
-        const locals = opts.copy ? [] : getLocalExistingFiles(dest, avails);
-        filterAvailables(avails, locals);
-        const files = opts.uninstall ? [] : await getSelected(opts.components, opts.all, opts.confirm, avails);
-        if (!opts.uninstall && files.length <= 0)
-            throw new Error("no components specified");
-        if (opts.update) {
-            await updateProcess(src, dest, files, locals);
-            p.log.success("Components successfully updated.");
-        }
-        else if (opts.remove) {
-            await removeProcess(dest, files, locals);
-            p.log.success("Components successfully removed.");
-        }
-        else if (opts.uninstall) {
-            await uninstallProcess(dest, locals);
-            p.log.success("SvSeeds successfully uninstalled.");
-        }
-        else {
-            await copyProcess(src, dest, files, opts.overwrite, opts.style);
-            p.log.success("Components successfully copied.");
-            p.note(`import ${getNoPrefixName(files[0])} from '$lib/_svseeds/${files[0]}';`, "Usage Example");
-            p.outro("Import svelte file as usual.");
-        }
-    }
-    catch (e) {
-        if (e instanceof Error && e.cause !== CANCEL_CODE) {
-            p.log.error(`error: ${e.message}`);
-            exitCode = 1;
-        }
-    }
-    finally {
-        await fs.rm(tmp, { recursive: true, force: true }).catch();
-        if (exitCode)
-            process.exit(exitCode);
-    }
-}
-async function waitProcess(msg, fn, ...args) {
-    const wait = p.spinner();
-    wait.start(msg.start);
-    let result;
-    let success = false;
-    try {
-        result = await fn(...args);
-        success = true;
-    }
-    finally {
-        const [stop, code] = success ? [msg.success, 0] : [msg.fail, 1];
-        wait.stop(stop, code);
-    }
-    return result;
-}
-async function getDestinationProcess(option, confirm) {
-    const project = getProjectPath();
-    if (!project)
-        return project;
-    const dest = path.join(project, option);
-    if (confirm && option !== defaultPath)
-        await confirmPath(`Target directory: ${dest}`);
-    return path.normalize(dest);
-}
-function getProjectPath() {
-    const dir = path.dirname(execSync("npm root", { encoding: "utf8" }).trim());
-    if (dir === path.parse(dir).root)
-        throw new Error("current directory seems to be root");
-    return dir;
-}
-async function confirmPath(message) {
-    const ok = await p.confirm({ message });
-    if (p.isCancel(ok) || !ok) {
-        p.cancel("cancelled");
-        throw new Error("cancelled", { cause: CANCEL_CODE });
-    }
-}
-async function downloadProcess(tmp) {
-    const msg = { start: "Preparing", success: "Ready.", fail: "Process failed" };
-    return await waitProcess(msg, downloadPackage, tmp);
-}
-async function downloadPackage(tmp) {
-    const execPromise = promisify(exec);
-    await execPromise(`npm pack ${ui.package}`, { cwd: tmp });
-    const tgz = readdirSync(tmp).find(file => file.startsWith(ui.tar) && file.endsWith("gz"));
-    if (!tgz)
-        throw new Error(`package ${ui.package} not found`);
-    await x({ file: path.join(tmp, tgz), cwd: tmp });
-    return path.resolve(path.join(tmp, "package", ui.dir));
-}
-function getAvailables(src) {
-    const avails = new Map();
-    readdirSync(src)
-        .filter(file => file.endsWith(ui.ext))
-        .forEach(file => {
-        const name = file.replace(ui.ext, "");
-        if (file.startsWith(ui.prefix)) {
-            avails.set(name.replace(ui.prefix, ""), file);
-        }
-        avails.set(name, file);
-    });
-    return avails;
-}
-function getNoPrefixName(file) {
-    return file.replace(ui.ext, "").replace(ui.prefix, "");
-}
-function filterAvailables(avails, locals) {
-    if (locals.length <= 0)
-        return;
-    for (const [name, file] of avails.entries()) {
-        if (!locals.includes(file))
-            avails.delete(name);
-    }
-}
-async function getSelected(components, all, confirm, avails) {
-    if (all) {
-        return [...new Set([...avails.values()])];
-    }
-    else if (components.length > 0) {
-        return recognizeValidNames(components, avails).map(name => avails.get(name) ?? "");
-    }
-    else {
-        if (!confirm)
-            return [];
-        return await selectComponentsProcess(avails);
-    }
-}
-function recognizeValidNames(names, avails) {
-    const valid = { true: [], false: [] };
-    names.forEach(name => valid[`${avails.has(name)}`].push(name));
-    if (valid.false.length > 0)
-        p.log.warn(`warn: components does not exist: ${valid.false.join(", ")}`);
-    return [...new Set(valid.true)];
-}
-async function selectComponentsProcess(avails) {
-    const message = `Select components.`;
-    const opts = [...avails.entries()]
-        .filter(([name, _]) => !name.startsWith(ui.prefix))
-        .map(([name, file]) => ({ value: file, label: name }));
-    return selectComponents(message, opts);
-}
-async function selectComponents(message, options) {
-    const selected = await p.multiselect({ message, options, required: true });
-    if (p.isCancel(selected)) {
-        p.cancel("cancelled");
-        throw new Error("cancelled", { cause: -1 });
-    }
-    return selected;
-}
-function getLocalExistingFiles(dest, avails) {
-    const svseeds = new Set(avails.values());
-    svseeds.add(ui.core).add(ui.style);
-    const files = readdirSync(dest).filter(file => svseeds.has(file));
-    return files;
-}
-async function updateProcess(src, dest, locals, files) {
-    const msg = { start: "Start to update", success: "Update done.", fail: "Update failed." };
-    await waitProcess(msg, updateFiles, src, dest, files, locals);
-}
-function updateFiles(src, dest, locals, files) {
-    const target = locals.filter(file => files.includes(file));
-    copyOverwrite(src, dest, target);
-}
-async function removeProcess(dest, locals, files) {
-    const msg = { start: "Start to remove", success: "Remove done.", fail: "Remove failed." };
-    await waitProcess(msg, removeFiles, dest, locals, files);
-}
-async function removeFiles(dest, locals, files) {
-    const target = files ? locals.filter(file => files.includes(file)) : locals;
-    for (const file of target) {
-        await fs.rm(path.join(dest, file));
-    }
-}
-async function uninstallProcess(dest, locals) {
-    const msg = { start: "Start to uninstall", success: "Uninstall done.", fail: "Uninstall failed." };
-    await waitProcess(msg, uninstallFiles, dest, locals);
-}
-async function uninstallFiles(dest, locals) {
-    await removeFiles(dest, locals);
-    if (readdirSync(dest).length <= 0)
-        await fs.rmdir(dest);
-}
-async function copyProcess(src, dest, files, overwrite, style) {
-    if (style) {
-        files.push(ui.core, ui.style);
-    }
-    else {
-        files.push(ui.core);
-    }
-    const msg = { start: "Start to copy files", success: "Copy done.", fail: "Copy failed." };
-    await waitProcess(msg, copyFiles, src, dest, files, overwrite);
-}
-async function copyFiles(src, dest, files, overwrite) {
-    await fs.mkdir(dest, { recursive: true });
-    if (overwrite) {
-        await copyOverwrite(src, dest, files);
-    }
-    else {
-        await copyNoOverwrite(src, dest, files);
-    }
-}
-async function copyOverwrite(src, dest, files) {
-    for (const file of files) {
-        await fs.cp(path.join(src, file), path.join(dest, file));
-    }
-}
-async function copyNoOverwrite(src, dest, files) {
-    const skip = [];
-    for (const file of files) {
-        const d = path.join(dest, file);
-        if (await isExists(d))
-            skip.push(file);
-        await fs.cp(path.join(src, file), d, { force: false });
-    }
-    if (skip.length >= 0)
-        p.log.info(`Skipped ${skip.length} files.`);
-}
-async function isExists(path) {
-    try {
-        await fs.access(path);
-        return true;
-    }
-    catch (e) {
-        return false;
-    }
-}