kosui 0.0.7

package/dist/command/commander.svelte

@@ -0,0 +1,107 @@
+<script module lang="ts">
+  import { match } from "../utils";
+  import { Check, ChevronRight } from "@lucide/svelte";
+  import {
+    Action,
+    Command,
+    CommandContent,
+    CommandDivider,
+    CommandItem,
+    CommandSearch,
+    Registry,
+  } from ".";
+  import { events } from "..";
+  import { Modal } from "../modal";
+  import { Shortcut, ShortcutBadge } from "../shortcut";
+
+  export type CommanderProps = {
+    open?: boolean;
+    query?: string;
+    command: Registry;
+  };
+</script>
+
+<script lang="ts">
+  let {
+    open = $bindable(false),
+    query = $bindable(""),
+    command,
+  }: CommanderProps = $props();
+
+  let actions = $derived(
+    command.actions.filter(
+      (action) =>
+        action.enabled() &&
+        (match(action.id, query) ||
+          (action.category && match(action.category, query)) ||
+          match(action.name, query) ||
+          match(action.description, query)),
+    ),
+  );
+
+  let categoryHasSelected = $derived(
+    actions.reduce(
+      (acc, { category, selected }) => ({
+        ...acc,
+        [category]: acc[category] || selected !== undefined,
+      }),
+      {} as Record<string, boolean>,
+    ),
+  );
+
+  function handleSelect(action: Action) {
+    action.callback();
+    open = false;
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    const action = command.getByShortcut(Shortcut.fromEvent(event));
+    if (action && action.enabled()) {
+      action.callback();
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
+  $effect(() => {
+    return events.on("keydown", handleKeyDown);
+  });
+</script>
+
+<Modal
+  bind:open
+  onoutroend={() => (query = "")}
+  class="h-[min(60%,48em)] w-[min(calc(100%-1em),36em)] rounded-lg bg-m3-surface-container p-0"
+>
+  <Command>
+    <CommandSearch bind:value={query} />
+    <CommandDivider />
+    <CommandContent>
+      {#if actions.length > 0}
+        {#each actions as action (action.id)}
+          <CommandItem
+            onSelect={() => handleSelect(action)}
+            title={action.description}
+          >
+            <action.icon size={14} class="mr-2" />
+            <div>{action.category}</div>
+            <ChevronRight size={14} />
+            {#if categoryHasSelected[action.category]}
+              {#if action.selected?.()}
+                <Check size={16} class="text-m3-primary" />
+              {:else}
+                <div class="size-4"></div>
+              {/if}
+            {/if}
+            <div>{action.name}</div>
+            {#if action.shortcut}
+              <ShortcutBadge class="ml-auto" shortcut={action.shortcut} />
+            {/if}
+          </CommandItem>
+        {/each}
+      {:else}
+        <div class="text-center">No results found.</div>
+      {/if}
+    </CommandContent>
+  </Command>
+</Modal>

package/dist/command/commander.svelte.d.ts

@@ -0,0 +1,9 @@
+import { Registry } from ".";
+export type CommanderProps = {
+    open?: boolean;
+    query?: string;
+    command: Registry;
+};
+declare const Commander: import("svelte").Component<CommanderProps, {}, "open" | "query">;
+type Commander = ReturnType<typeof Commander>;
+export default Commander;

package/dist/command/index.d.ts

@@ -0,0 +1,8 @@
+export { Divider as CommandDivider, Header as CommandHeader } from "../common";
+export { Action, Registry } from "./action.svelte";
+export { default as CommandContent } from "./command-content.svelte";
+export { default as CommandInput } from "./command-input.svelte";
+export { default as CommandItem } from "./command-item.svelte";
+export { default as CommandSearch } from "./command-search.svelte";
+export { default as Command } from "./command.svelte";
+export { default as Commander } from "./commander.svelte";

package/dist/command/index.js

@@ -0,0 +1,8 @@
+export { Divider as CommandDivider, Header as CommandHeader } from "../common";
+export { Action, Registry } from "./action.svelte";
+export { default as CommandContent } from "./command-content.svelte";
+export { default as CommandInput } from "./command-input.svelte";
+export { default as CommandItem } from "./command-item.svelte";
+export { default as CommandSearch } from "./command-search.svelte";
+export { default as Command } from "./command.svelte";
+export { default as Commander } from "./commander.svelte";

package/dist/common/divider.svelte

@@ -0,0 +1,13 @@
+<script module lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+  import type { ClassName } from "../utils";
+
+  export type DividerProps = {} & ClassName & HTMLAttributes<HTMLHRElement>;
+</script>
+
+<script lang="ts">
+  let { class: className, ...restProps }: DividerProps = $props();
+</script>
+
+<hr class={twMerge("-mx-1 my-1", className)} {...restProps} />

package/dist/common/divider.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { ClassName } from "../utils";
+export type DividerProps = {} & ClassName & HTMLAttributes<HTMLHRElement>;
+declare const Divider: import("svelte").Component<DividerProps, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/common/header.svelte

@@ -0,0 +1,35 @@
+<script module lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+  import { baseClasses, type Variants } from "../base";
+  import type { ClassName } from "../utils";
+
+  export type HeaderProps = {
+    children: Snippet;
+  } & ClassName &
+    Variants &
+    HTMLAttributes<HTMLDivElement>;
+</script>
+
+<script lang="ts">
+  let {
+    children,
+    class: className,
+    variant = "plain",
+    color = "primary",
+    shape = "rounded",
+    ...restProps
+  }: HeaderProps = $props();
+</script>
+
+<div
+  class={twMerge(
+    baseClasses({ variant, color, shape }),
+    "px-2 py-1 text-xs uppercase",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children()}
+</div>

package/dist/common/header.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type Variants } from "../base";
+import type { ClassName } from "../utils";
+export type HeaderProps = {
+    children: Snippet;
+} & ClassName & Variants & HTMLAttributes<HTMLDivElement>;
+declare const Header: import("svelte").Component<HeaderProps, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/common/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Divider, type DividerProps } from "./divider.svelte";
+export { default as Header, type HeaderProps } from "./header.svelte";
+export { ItemContext } from "./item-context.svelte";

package/dist/common/index.js

@@ -0,0 +1,3 @@
+export { default as Divider } from "./divider.svelte";
+export { default as Header } from "./header.svelte";
+export { ItemContext } from "./item-context.svelte";

package/dist/common/item-context.svelte.d.ts

@@ -0,0 +1,12 @@
+export declare class ItemContext {
+    #private;
+    get input(): string;
+    set input(value: string);
+    bindInput(getInput: () => string, setInput: (val: string) => void): void;
+    get items(): HTMLElement[];
+    add(item: HTMLElement): () => void;
+    delete(item: HTMLElement): void;
+    get focused(): HTMLElement | undefined;
+    set focused(value: HTMLElement | undefined);
+    handleKeyDown(event: KeyboardEvent): void;
+}

package/dist/common/item-context.svelte.js

@@ -0,0 +1,77 @@
+import { Bindable } from "../bindable.svelte";
+import { OrderedHTMLElements } from "../ordered-html-elements";
+import { Shortcut } from "../shortcut";
+export class ItemContext {
+    #input = new Bindable("");
+    #items = new OrderedHTMLElements();
+    #focused = $state();
+    get input() {
+        return this.#input.value;
+    }
+    set input(value) {
+        this.#input.value = value;
+    }
+    bindInput(getInput, setInput) {
+        this.#input.bind(getInput, setInput);
+    }
+    get items() {
+        return this.#items.items;
+    }
+    add(item) {
+        this.#items.add(item);
+        this.focused = this.#input.value === "" ? undefined : this.items[0];
+        return () => this.delete(item);
+    }
+    delete(item) {
+        this.#items.delete(item);
+        this.focused = this.#input.value === "" ? undefined : this.items[0];
+    }
+    get focused() {
+        return this.#focused;
+    }
+    set focused(value) {
+        this.#focused = value;
+    }
+    handleKeyDown(event) {
+        if (!this.items)
+            return;
+        if (Shortcut.ARROW_UP.matches(event)) {
+            if (this.items.length !== 0) {
+                if (!this.focused) {
+                    this.focused = this.items[this.items.length - 1];
+                    this.focused.scrollIntoView(false);
+                }
+                else {
+                    const index = this.items.indexOf(this.focused);
+                    this.focused =
+                        this.items[(index - 1 + this.items.length) % this.items.length];
+                    this.focused.scrollIntoView(false);
+                }
+            }
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+        else if (Shortcut.ARROW_DOWN.matches(event)) {
+            if (this.items.length !== 0) {
+                if (!this.focused) {
+                    this.focused = this.items[0];
+                    this.focused.scrollIntoView(false);
+                }
+                else {
+                    const index = this.items.indexOf(this.focused);
+                    this.focused = this.items[(index + 1) % this.items.length];
+                    this.focused.scrollIntoView(false);
+                }
+            }
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+        else if (Shortcut.ENTER.matches(event)) {
+            if (this.focused) {
+                this.focused.click();
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+        }
+    }
+}

package/dist/dialog/dialog-button.svelte

@@ -0,0 +1,25 @@
+<script module lang="ts">
+  import type { Snippet } from "svelte";
+  import { Button, type ButtonProps } from "../button";
+
+  export type DialogButtonProps<T> = {
+    value: T | undefined;
+    autofocus?: boolean;
+    onSelect: (value: T | undefined) => void;
+    children: Snippet;
+  } & Omit<ButtonProps, "value">;
+</script>
+
+<script lang="ts" generics="T">
+  let {
+    value,
+    onSelect,
+    autofocus = false,
+    children,
+    ...restProps
+  }: DialogButtonProps<T> = $props();
+</script>
+
+<Button onclick={() => onSelect(value)} {autofocus} {...restProps}>
+  {@render children()}
+</Button>

package/dist/dialog/dialog-button.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from "svelte";
+import { type ButtonProps } from "../button";
+export type DialogButtonProps<T> = {
+    value: T | undefined;
+    autofocus?: boolean;
+    onSelect: (value: T | undefined) => void;
+    children: Snippet;
+} & Omit<ButtonProps, "value">;
+declare function $$render<T>(): {
+    props: DialogButtonProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DialogButton: $$IsomorphicComponent;
+type DialogButton<T> = InstanceType<typeof DialogButton<T>>;
+export default DialogButton;

package/dist/dialog/dialog.svelte

@@ -0,0 +1,69 @@
+<script module lang="ts">
+  import type { Icon } from "@lucide/svelte";
+  import type { Snippet } from "svelte";
+  import { twMerge } from "tailwind-merge";
+  import { mergeComponentProps } from "../merge-props";
+  import { Modal, type ModalProps } from "../modal";
+
+  export type DialogProps<T> = {
+    ref?: HTMLDialogElement;
+    onSelect?: (value: T | undefined) => void;
+    icon?: typeof Icon;
+    title?: string;
+    children: Snippet;
+    actions?: Snippet<[{ onSelect: (value: T | undefined) => void }]>;
+  } & ModalProps;
+</script>
+
+<script lang="ts" generics="T">
+  let {
+    ref = $bindable(),
+    open = $bindable(),
+    onSelect,
+    class: className,
+    icon: IconComponent,
+    title,
+    children,
+    actions,
+    ...restProps
+  }: DialogProps<T> = $props();
+
+  function handleSelect(value: T | undefined) {
+    onSelect?.(value);
+    open = false;
+  }
+
+  function handleCancel() {
+    onSelect?.(undefined);
+  }
+</script>
+
+<Modal
+  bind:ref
+  bind:open
+  class={twMerge("w-[min(calc(100%-1em),36em)]", className)}
+  {...mergeComponentProps(
+    Modal,
+    { role: "dialog", "aria-modal": "true", onCancel: handleCancel },
+    restProps,
+  )}
+>
+  <div class={twMerge("flex flex-col gap-4")}>
+    {#if IconComponent}
+      <IconComponent class="mx-auto" />
+    {/if}
+    {#if title}
+      <div class={twMerge("text-xl", IconComponent ? "text-center" : "")}>
+        {title}
+      </div>
+    {/if}
+    <div>
+      {@render children()}
+    </div>
+    {#if actions}
+      <div class="mt-2 flex place-content-end gap-2">
+        {@render actions({ onSelect: handleSelect })}
+      </div>
+    {/if}
+  </div>
+</Modal>

package/dist/dialog/dialog.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { Icon } from "@lucide/svelte";
+import type { Snippet } from "svelte";
+import { type ModalProps } from "../modal";
+export type DialogProps<T> = {
+    ref?: HTMLDialogElement;
+    onSelect?: (value: T | undefined) => void;
+    icon?: typeof Icon;
+    title?: string;
+    children: Snippet;
+    actions?: Snippet<[{
+        onSelect: (value: T | undefined) => void;
+    }]>;
+} & ModalProps;
+declare function $$render<T>(): {
+    props: DialogProps<T>;
+    exports: {};
+    bindings: "open" | "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "open" | "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Dialog: $$IsomorphicComponent;
+type Dialog<T> = InstanceType<typeof Dialog<T>>;
+export default Dialog;

package/dist/dialog/dialoguer-context.svelte.d.ts

@@ -0,0 +1,53 @@
+import type { Icon } from "@lucide/svelte";
+import { type Snippet } from "svelte";
+import type { Variants } from "../base";
+import type { InputProps } from "../input";
+export type ButtonProps<T> = {
+    text: string;
+    value: T;
+    default?: boolean;
+} & Variants;
+type ShowDialogProps<T> = {
+    icon?: typeof Icon;
+    title?: string;
+    inputProps?: InputProps;
+    message: Snippet<[]> | string;
+    buttons: ButtonProps<T>[];
+};
+type NoticeDialogProps = {
+    icon?: typeof Icon;
+    title?: string;
+    message: Snippet<[]> | string;
+    acceptText?: string;
+};
+type ConfirmDialogProps = {
+    icon?: typeof Icon;
+    title?: string;
+    message: Snippet<[]> | string;
+    cancelText?: string;
+    acceptText?: string;
+};
+type InputDialogProps = {
+    icon?: typeof Icon;
+    title?: string;
+    props: InputProps;
+    message: Snippet<[]> | string;
+    cancelText?: string;
+    acceptText?: string;
+};
+export declare class DialoguerContext {
+    message: Snippet<[]> | string;
+    icon: typeof Icon | undefined;
+    title: string | undefined;
+    inputProps: InputProps | undefined;
+    buttons: ButtonProps<unknown>[];
+    resolve: (value: unknown) => void;
+    open: boolean;
+    show<T>(dialog: ShowDialogProps<T>): Promise<T>;
+    notice(dialog: NoticeDialogProps): Promise<void>;
+    confirm(dialog: ConfirmDialogProps): Promise<boolean>;
+    input(dialog: InputDialogProps): Promise<string | undefined>;
+}
+export declare function setDialoguerContext(state: DialoguerContext): DialoguerContext;
+export declare function getDialoguerContext(): DialoguerContext;
+export {};

package/dist/dialog/dialoguer-context.svelte.js

@@ -0,0 +1,85 @@
+import { getContext, setContext } from "svelte";
+export class DialoguerContext {
+    message = $state("");
+    icon = $state();
+    title = $state();
+    inputProps = $state();
+    buttons = $state.raw([]);
+    resolve = $state(() => { });
+    open = $state(false);
+    show(dialog) {
+        ({
+            icon: this.icon,
+            title: this.title,
+            inputProps: this.inputProps,
+            message: this.message,
+            buttons: this.buttons,
+        } = dialog);
+        this.open = true;
+        return new Promise((newResolve) => (this.resolve = newResolve));
+    }
+    async notice(dialog) {
+        await this.show({
+            icon: dialog.icon,
+            title: dialog.title,
+            inputProps: undefined,
+            message: dialog.message,
+            buttons: [
+                {
+                    text: dialog.acceptText ?? "OK",
+                    value: null,
+                    default: true,
+                },
+            ],
+        });
+    }
+    async confirm(dialog) {
+        return await this.show({
+            icon: dialog.icon,
+            title: dialog.title,
+            inputProps: undefined,
+            message: dialog.message,
+            buttons: [
+                {
+                    text: dialog.cancelText ?? "Cancel",
+                    value: false,
+                    default: false,
+                },
+                {
+                    text: dialog.acceptText ?? "Accept",
+                    value: true,
+                    variant: "filled",
+                    default: true,
+                },
+            ],
+        });
+    }
+    async input(dialog) {
+        return await this.show({
+            icon: dialog.icon,
+            title: dialog.title,
+            inputProps: dialog.props,
+            message: dialog.message,
+            buttons: [
+                {
+                    text: dialog.cancelText ?? "Cancel",
+                    value: "cancel",
+                },
+                {
+                    text: dialog.acceptText ?? "Accept",
+                    value: "accept",
+                    variant: "filled",
+                },
+            ],
+        });
+    }
+}
+export function setDialoguerContext(state) {
+    return setContext(DialoguerContext, state);
+}
+export function getDialoguerContext() {
+    const ctx = getContext(DialoguerContext);
+    if (!ctx)
+        throw new Error("DialoguerContext is undefined");
+    return ctx;
+}

package/dist/dialog/dialoguer.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { Input } from "../input";
+  import DialogButton from "./dialog-button.svelte";
+  import Dialog from "./dialog.svelte";
+  import {
+    DialoguerContext,
+    setDialoguerContext,
+    type ButtonProps,
+  } from "./dialoguer-context.svelte";
+
+  const dialog = setDialoguerContext(new DialoguerContext());
+
+  type Props = {
+    children: Snippet;
+  };
+  let { children }: Props = $props();
+
+  let value: string = $derived(dialog.inputProps?.value ?? "");
+
+  function getValue(button: ButtonProps<unknown>) {
+    if (dialog.inputProps === undefined) {
+      return button.value;
+    }
+    if (button.value === "cancel") {
+      return undefined;
+    }
+    if (button.value === "accept") {
+      return value;
+    }
+    throw new Error("Invalid state");
+  }
+</script>
+
+<Dialog
+  bind:open={dialog.open}
+  icon={dialog.icon}
+  title={dialog.title}
+  onSelect={dialog.resolve}
+>
+  {#if typeof dialog.message === "function"}
+    {@render dialog.message()}
+  {:else}
+    {dialog.message}
+  {/if}
+
+  {#if dialog.inputProps !== undefined}
+    <Input class="mt-2 w-full" bind:value autofocus {...dialog.inputProps} />
+  {/if}
+
+  {#snippet actions(props)}
+    {#each dialog.buttons as button (button)}
+      <DialogButton
+        variant={button.variant}
+        value={getValue(button)}
+        autofocus={button.default}
+        {...props}
+      >
+        {button.text}
+      </DialogButton>
+    {/each}
+  {/snippet}
+</Dialog>
+
+{@render children()}