@stnd/ui 0.5.0

package/Combobox.svelte

@@ -0,0 +1,458 @@
+<script>
+  import { setContext } from "svelte";
+
+  /**
+   * @typedef {Object} ComboboxOption
+   * @property {string} label
+   * @property {string} value
+   */
+
+  /**
+   * @typedef {Object} ComboboxProps
+   * @property {ComboboxOption[]} options
+   * @property {string} [value]
+   * @property {string} [placeholder]
+   * @property {string} [searchPlaceholder]
+   * @property {string} [emptyText]
+   * @property {boolean} [allowCustom]
+   * @property {string} [class]
+   * @property {string} [name]
+   * @property {string} [id]
+   */
+
+  /** @type {ComboboxProps} */
+  let {
+    options = [],
+    value = $bindable(""),
+    placeholder = "Sélectionnez une option...",
+    searchPlaceholder = "Rechercher...",
+    emptyText = "Aucun résultat trouvé.",
+    allowCustom = false,
+    class: className = "",
+    name = "",
+    id = "",
+    // Preview-related options (optional)
+    preview = false,
+    previewOnHover = true,
+    previewOnSelect = true,
+    // Optional callback: parent can pass a function to load a font (e.g. loadGoogleFont)
+    loadFont = null,
+    // Debounce delay (ms) before invoking preview loader on hover
+    previewDebounce = 100,
+    ...props
+  } = $props();
+
+  let open = $state(false);
+  let searchQuery = $state("");
+  let containerElement = $state();
+  let inputElement = $state();
+
+  // Preview helpers (font previewing / lazy loading)
+  let _previewTimer = null;
+
+  function cancelPreview() {
+    if (_previewTimer) {
+      clearTimeout(_previewTimer);
+      _previewTimer = null;
+    }
+  }
+
+  function triggerPreview(optValue) {
+    if (!preview) return;
+    // call provided loader callback if available
+    try {
+      if (typeof loadFont === "function") {
+        loadFont(optValue);
+      }
+    } catch (err) {
+      // swallow loader errors
+    }
+    // Dispatch a DOM-level preview event for parents to listen if desired
+    if (containerElement) {
+      containerElement.dispatchEvent(
+        new CustomEvent("preview", {
+          detail: { value: optValue },
+          bubbles: true,
+        }),
+      );
+    }
+  }
+
+  function schedulePreview(optValue) {
+    cancelPreview();
+    if (!preview || !previewOnHover) return;
+    _previewTimer = setTimeout(() => {
+      triggerPreview(optValue);
+      _previewTimer = null;
+    }, previewDebounce);
+  }
+
+  let filteredOptions = $derived.by(() => {
+    let filtered = options.filter((opt) =>
+      opt.label.toLowerCase().includes(searchQuery.toLowerCase()),
+    );
+    if (
+      allowCustom &&
+      searchQuery.trim() &&
+      !options.some(
+        (opt) =>
+          opt.value.toLowerCase() === searchQuery.trim().toLowerCase() ||
+          opt.label.toLowerCase() === searchQuery.trim().toLowerCase(),
+      )
+    ) {
+      filtered.push({
+        value: searchQuery.trim(),
+        label: `Ajouter "${searchQuery.trim()}"`,
+        isCustom: true,
+      });
+    }
+    return filtered;
+  });
+
+  let selectedOption = $derived(
+    options.find((opt) => opt.value === value) ||
+      (allowCustom && value ? { label: value, value } : undefined),
+  );
+
+  $effect(() => {
+    if (!containerElement) return;
+    function handleSetValue(e) {
+      const incoming = e.detail?.value;
+      if (incoming) value = incoming;
+    }
+    containerElement.addEventListener("setvalue", handleSetValue);
+    const initial = containerElement.getAttribute("data-initial-value");
+    if (initial && !value) value = initial;
+    return () =>
+      containerElement.removeEventListener("setvalue", handleSetValue);
+  });
+
+  function toggle() {
+    open = !open;
+    if (open) {
+      searchQuery = "";
+      setTimeout(() => inputElement?.focus(), 10);
+    }
+  }
+
+  function close() {
+    open = false;
+  }
+
+  function selectOption(optValue) {
+    value = optValue;
+    // Trigger preview-on-select if enabled
+    if (preview && previewOnSelect) {
+      try {
+        if (typeof loadFont === "function") {
+          loadFont(optValue);
+        }
+      } catch (err) {
+        // ignore
+      }
+      if (containerElement) {
+        containerElement.dispatchEvent(
+          new CustomEvent("preview", {
+            detail: { value: optValue },
+            bubbles: true,
+          }),
+        );
+      }
+    }
+
+    close();
+    cancelPreview();
+
+    if (containerElement) {
+      containerElement.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: optValue },
+          bubbles: true,
+        }),
+      );
+    }
+  }
+
+  function handleWindowClick(e) {
+    if (open && containerElement && !containerElement.contains(e.target)) {
+      close();
+    }
+  }
+
+  function handleKeydown(e) {
+    if (!open) {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggle();
+      }
+      return;
+    }
+
+    if (e.key === "Escape") {
+      close();
+    } else if (
+      e.key === "Enter" &&
+      allowCustom &&
+      searchQuery.trim() &&
+      filteredOptions.length > 0 &&
+      filteredOptions[0].isCustom
+    ) {
+      e.preventDefault();
+      selectOption(searchQuery.trim());
+    }
+  }
+</script>
+
+<svelte:window onclick={handleWindowClick} />
+
+<div
+  bind:this={containerElement}
+  class="std-combobox {className}"
+  {id}
+  onkeydown={handleKeydown}
+  {...props}
+>
+  <button
+    type="button"
+    class="std-combobox-trigger"
+    aria-haspopup="listbox"
+    aria-expanded={open}
+    aria-controls="combobox-listbox"
+    onclick={toggle}
+  >
+    <span class="truncate" class:muted={!selectedOption}>
+      {selectedOption ? selectedOption.label : placeholder}
+    </span>
+
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="icon chevron-icon"
+    >
+      <path d="m7 15 5 5 5-5"></path>
+      <path d="m7 9 5-5 5 5"></path>
+    </svg>
+  </button>
+
+  {#if open}
+    <div
+      class="std-menu-content std-combobox-popover"
+      role="dialog"
+      aria-label="Options"
+    >
+      <header class="std-combobox-header">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="icon search-icon"
+        >
+          <circle cx="11" cy="11" r="8"></circle>
+          <path d="m21 21-4.3-4.3"></path>
+        </svg>
+        <input
+          bind:this={inputElement}
+          bind:value={searchQuery}
+          type="text"
+          placeholder={searchPlaceholder}
+          autocomplete="off"
+          autocorrect="off"
+          spellcheck="false"
+          aria-autocomplete="list"
+          role="combobox"
+          aria-expanded="true"
+          aria-controls="combobox-listbox"
+        />
+      </header>
+
+      <div id="combobox-listbox" class="std-combobox-listbox" role="listbox">
+        {#if filteredOptions.length === 0}
+          <div class="std-combobox-empty">{emptyText}</div>
+        {:else}
+          {#each filteredOptions as opt (opt.value)}
+            <button
+              type="button"
+              class="std-menu-item std-combobox-option"
+              class:selected={value === opt.value}
+              role="option"
+              aria-selected={value === opt.value}
+              onmouseenter={() => schedulePreview(opt.value)}
+              onmouseleave={cancelPreview}
+              onclick={() => selectOption(opt.value)}
+            >
+              <span class="item-label truncate">{opt.label}</span>
+              {#if value === opt.value}
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="item-icon check-icon"
+                >
+                  <polyline points="20 6 9 17 4 12"></polyline>
+                </svg>
+              {/if}
+            </button>
+          {/each}
+        {/if}
+      </div>
+    </div>
+  {/if}
+  {#if name}
+    <input type="hidden" {name} {value} />
+  {/if}
+</div>
+
+<style>
+  .std-combobox {
+    position: relative;
+    display: inline-block;
+    font-family: var(--font-interface);
+    text-box-trim: none;
+  }
+
+  .std-combobox-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: var(--space-d4) var(--space-d4);
+    background: var(--color-surface);
+    font-weight: var(--font-weight);
+    font-size: 1em;
+    text-box-trim: none;
+
+    border: none;
+    border-radius: var(--radius-sm);
+    color: var(--color-muted);
+    cursor: pointer;
+    text-align: left;
+    outline: none;
+    transition: all var(--transition-fast);
+    box-shadow: var(--shadow-raised);
+
+    cursor: pointer;
+    text-align: left;
+    text-shadow: none !important;
+    &:hover {
+      background: var(--color-surface-high) !important;
+    }
+  }
+
+  .std-combobox-trigger:hover,
+  .std-combobox-trigger:focus {
+    border-color: var(--color-subtle);
+    background: var(--color-surface);
+    color: var(--color-foreground);
+  }
+
+  .std-combobox-trigger .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .std-combobox-trigger .muted {
+    color: var(--color-muted);
+  }
+
+  .std-combobox-popover {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: var(--space-d2);
+    min-width: 100%;
+    width: max-content;
+    max-width: 300px;
+    overflow: hidden;
+    background: var(--color-surface);
+  }
+
+  .std-combobox-header {
+    display: flex;
+    align-items: center;
+    padding: 0 var(--space-d4) var(--space-d4);
+    margin-bottom: var(--space-d4);
+    border-bottom: var(--border);
+  }
+
+  .std-combobox-header .search-icon {
+    color: var(--color-muted);
+    flex-shrink: 0;
+  }
+
+  .std-combobox-header input {
+    width: 100%;
+    background: transparent;
+    border: none;
+    outline: none;
+    font-family: inherit;
+    font-size: var(--size-sm);
+    box-shadow: none;
+  }
+
+  .std-combobox-header input::placeholder {
+    color: var(--color-muted);
+  }
+
+  .std-combobox-listbox {
+    max-height: 250px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    overflow-y: auto;
+  }
+
+  .std-combobox-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .std-combobox-option .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .std-combobox-empty {
+    text-align: center;
+    color: var(--color-subtle);
+    font-size: var(--size-sm);
+    padding: var(--space-d2);
+  }
+
+  .std-combobox-option.selected {
+    background: var(--color-surface-lowest);
+  }
+
+  .icon {
+    opacity: 0.5;
+    flex-shrink: 0;
+  }
+
+  .check-icon {
+    opacity: 1;
+    color: var(--color-foreground);
+  }
+</style>

package/ContextMenu.svelte

@@ -0,0 +1,120 @@
+<script>
+  import { setContext } from "svelte";
+
+  /**
+   * @typedef {Object} ContextMenuProps
+   * @property {import('svelte').Snippet} children - The trigger element(s)
+   * @property {import('svelte').Snippet} [content] - The menu content
+   * @property {string} [class] - Optional class for the trigger wrapper
+   */
+
+  /** @type {ContextMenuProps} */
+  let { children, content, class: className = "", ...props } = $props();
+
+  let open = $state(false);
+  let positioned = $state(false);
+  let x = $state(0);
+  let y = $state(0);
+  let menuElement = $state();
+
+  function onContextMenu(e) {
+    if (e.ctrlKey) return;
+    e.preventDefault();
+
+    let targetX = e.clientX;
+    let targetY = e.clientY;
+
+    x = targetX;
+    y = targetY;
+    open = true;
+    positioned = false;
+
+    // Use a microtask/timeout to wait for render then measure
+    setTimeout(() => {
+      if (!menuElement) return;
+
+      const rect = menuElement.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      if (targetX + rect.width > viewportWidth) {
+        targetX -= rect.width;
+      }
+      if (targetY + rect.height > viewportHeight) {
+        targetY -= rect.height;
+      }
+
+      x = targetX;
+      y = targetY;
+      positioned = true;
+    }, 0);
+  }
+
+  function close() {
+    open = false;
+    positioned = false;
+  }
+
+  setContext("context-menu", {
+    get open() {
+      return open;
+    },
+    close,
+  });
+
+  function handleWindowClick(e) {
+    if (open && menuElement && !menuElement.contains(e.target)) {
+      close();
+    }
+  }
+
+  function handleWindowKeydown(e) {
+    if (open && e.key === "Escape") {
+      close();
+    }
+  }
+</script>
+
+<svelte:window
+  onclick={handleWindowClick}
+  onkeydown={handleWindowKeydown}
+  onscroll={close}
+/>
+
+<div
+  class="context-menu-trigger {className}"
+  oncontextmenu={onContextMenu}
+  role="presentation"
+  {...props}
+>
+  {@render children?.()}
+</div>
+
+{#if open}
+  <div
+    bind:this={menuElement}
+    class="std-menu-content context-menu-content m-0 no-rhythm"
+    style:left="{x}px"
+    style:top="{y}px"
+    style:visibility={positioned ? "visible" : "hidden"}
+    role="menu"
+    tabindex="-1"
+  >
+    {@render content?.()}
+  </div>
+{/if}
+
+<style>
+  .context-menu-trigger {
+    display: contents;
+  }
+
+  .context-menu-content {
+    position: fixed;
+    min-width: var(--space-6);
+  }
+
+  :global(.context-menu-content > *) {
+    flex-shrink: 0;
+  }
+</style>

package/ContextMenuItem.svelte

@@ -0,0 +1,64 @@
+<script>
+  import { getContext } from "svelte";
+  import Icon from "@stnd/icon/Icon.svelte";
+
+  /**
+   * @typedef {Object} ContextMenuItemProps
+   * @property {import('svelte').Snippet} [children] - Item label
+   * @property {string} [label] - Label as a string
+   * @property {string} [icon] - Icon name
+   * @property {string} [shortcut] - Shortcut text (e.g. ⌘C)
+   * @property {boolean} [disabled] - Disabled state
+   * @property {boolean} [destructive] - Destructive state
+   * @property {() => void} [onclick] - Click handler
+   */
+
+  /** @type {ContextMenuItemProps} */
+  let {
+    children,
+    label,
+    icon,
+    shortcut,
+    disabled = false,
+    destructive = false,
+    onclick,
+    ...props
+  } = $props();
+
+  const ctx = getContext("context-menu");
+
+  function handleClick(e) {
+    if (disabled) return;
+    onclick?.(e);
+    ctx?.close();
+  }
+</script>
+
+<button
+  type="button"
+  class="std-menu-item"
+  class:disabled
+  class:destructive
+  onclick={handleClick}
+  role="menuitem"
+  aria-disabled={disabled}
+  {...props}
+>
+  {#if icon}
+    <div class="item-icon">
+      <Icon {icon} width="1rem" height="1rem" />
+    </div>
+  {/if}
+
+  <span class="item-label">
+    {#if children}
+      {@render children()}
+    {:else}
+      {label}
+    {/if}
+  </span>
+
+  {#if shortcut}
+    <span class="item-shortcut">{shortcut}</span>
+  {/if}
+</button>