@stnd/ui 0.5.0

package/ContextMenuItemCheckbox.svelte

@@ -0,0 +1,105 @@
+<script>
+  import { getContext } from "svelte";
+  import Icon from "@stnd/icon/Icon.svelte";
+
+  /**
+   * @typedef {Object} ContextMenuItemCheckboxProps
+   * @property {import('svelte').Snippet} [children] - Item label
+   * @property {string} [label] - Label as a string
+   * @property {boolean} [checked] - Checked state
+   * @property {boolean} [disabled] - Disabled state
+   * @property {(checked: boolean) => void} [onCheckedChange] - Change handler
+   */
+
+  /** @type {ContextMenuItemCheckboxProps} */
+  let {
+    children,
+    label,
+    checked = $bindable(false),
+    disabled = false,
+    onCheckedChange,
+    ...props
+  } = $props();
+
+  const ctx = getContext("context-menu");
+
+  function handleClick(e) {
+    if (disabled) return;
+    checked = !checked;
+    onCheckedChange?.(checked);
+    // Usually checkboxes don't close the menu immediately in all implementations,
+    // but for context menus they often do, or stay open if you use e.stopPropagation().
+    // We'll follow the standard and close it unless the user prevents it.
+    ctx?.close();
+  }
+</script>
+
+<button
+  type="button"
+  class="context-menu-item"
+  class:disabled
+  onclick={handleClick}
+  role="menuitemcheckbox"
+  aria-checked={checked}
+  aria-disabled={disabled}
+  {...props}
+>
+  <div class="item-check">
+    {#if checked}
+      <Icon icon="check" />
+    {/if}
+  </div>
+
+  <span class="item-label">
+    {#if children}
+      {@render children()}
+    {:else}
+      {label}
+    {/if}
+  </span>
+</button>
+
+<style>
+  .context-menu-item {
+    all: unset;
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+    align-items: center;
+    gap: 0;
+    padding: 0 var(--space-d4);
+    border-radius: var(--radius-sm);
+    font-size: var(--size-sm);
+    font-family: var(--font-interface);
+    color: var(--color-foreground);
+    cursor: pointer;
+    user-select: none;
+    transition: all var(--transition-fast);
+    min-height: var(--space);
+  }
+
+  .context-menu-item:hover:not(.disabled) {
+    background: var(--color-surface-high);
+    box-shadow: var(--shadow-raised);
+  }
+  .context-menu-item:active:not(.disabled) {
+    background: var(--color-surface-low);
+    box-shadow: var(--shadow-inset);
+  }
+
+  .context-menu-item.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .item-check {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .item-label {
+    flex: 1;
+    white-space: nowrap;
+  }
+</style>

package/ContextMenuLabel.svelte

@@ -0,0 +1,18 @@
+<script>
+  /**
+   * @typedef {Object} ContextMenuLabelProps
+   * @property {import('svelte').Snippet} [children] - Label content
+   * @property {string} [label] - Label as a string
+   */
+
+  /** @type {ContextMenuLabelProps} */
+  let { children, label } = $props();
+</script>
+
+<div class="std-menu-label">
+  {#if children}
+    {@render children()}
+  {:else}
+    {label}
+  {/if}
+</div>

package/ContextMenuSeparator.svelte

@@ -0,0 +1 @@
+<hr class="std-menu-separator" />

package/DialogManager.svelte

@@ -0,0 +1,32 @@
+<script>
+  import AlertDialog from "./AlertDialog.svelte";
+  import { dialogState } from "./dialog.js";
+
+  let state = $state({ open: false });
+
+  // Sync store to local state
+  $effect(() => {
+    const unsub = dialogState.subscribe((s) => {
+      state = s;
+    });
+    return unsub;
+  });
+
+  // Sync local open state back to store (when dialog closes internally)
+  function handleOpenChange(isOpen) {
+    if (!isOpen && state.open) {
+      dialogState.update(s => ({ ...s, open: false }));
+    }
+  }
+</script>
+
+<AlertDialog
+  open={state.open}
+  title={state.title}
+  description={state.description}
+  confirmLabel={state.confirmLabel}
+  cancelLabel={state.cancelLabel}
+  intent={state.intent}
+  onconfirm={state.onconfirm}
+  oncancel={state.oncancel}
+/>

package/Dropdown.svelte

@@ -0,0 +1,107 @@
+<script>
+  import { setContext } from "svelte";
+
+  /**
+   * @typedef {Object} DropdownProps
+   * @property {import('svelte').Snippet} trigger - The trigger element
+   * @property {import('svelte').Snippet} children - The menu items
+   * @property {'start' | 'end'} [align] - Alignment of the dropdown
+   * @property {string} [class] - Optional class
+   */
+
+  /** @type {DropdownProps} */
+  let {
+    trigger,
+    children,
+    align = "start",
+    class: className = "",
+    ...props
+  } = $props();
+
+  let open = $state(false);
+  let triggerElement = $state();
+  let menuElement = $state();
+
+  function toggle() {
+    open = !open;
+  }
+
+  function close() {
+    open = false;
+  }
+
+  setContext("dropdown", {
+    close,
+  });
+
+  function handleWindowClick(e) {
+    if (
+      open &&
+      menuElement &&
+      !menuElement.contains(e.target) &&
+      (!triggerElement || !triggerElement.contains(e.target))
+    ) {
+      close();
+    }
+  }
+
+  function handleKeydown(e) {
+    if (!open) return;
+    if (e.key === "Escape") {
+      close();
+      triggerElement?.focus();
+    }
+  }
+</script>
+
+<svelte:window onclick={handleWindowClick} onkeydown={handleKeydown} />
+
+<div class="std-dropdown {className}" {...props}>
+  <div
+    bind:this={triggerElement}
+    class="std-dropdown-trigger"
+    onclick={toggle}
+    role="button"
+    tabindex="0"
+    onkeydown={(e) => (e.key === "Enter" || e.key === " ") && toggle()}
+    aria-haspopup="menu"
+    aria-expanded={open}
+  >
+    {@render trigger?.()}
+  </div>
+
+  {#if open}
+    <div
+      bind:this={menuElement}
+      class="std-menu-content std-dropdown-content no-rhythm"
+      class:align-end={align === "end"}
+      role="menu"
+    >
+      {@render children?.()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .std-dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .std-dropdown-trigger {
+    display: inline-flex;
+    cursor: pointer;
+  }
+
+  .std-dropdown-content {
+    position: absolute;
+    top: 100%;
+    margin-top: var(--space-d2);
+    min-width: var(--space-6);
+
+    &.align-end {
+      right: 0;
+      transform-origin: top right;
+    }
+  }
+</style>

package/DropdownItem.svelte

@@ -0,0 +1,87 @@
+<script>
+  import { getContext } from "svelte";
+  import Icon from "@stnd/icon/Icon.svelte";
+
+  /**
+   * @typedef {Object} DropdownItemProps
+   * @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 {string} [href] - Link URL
+   * @property {(e: MouseEvent) => void} [onclick] - Click handler
+   */
+
+  /** @type {DropdownItemProps} */
+  let {
+    children,
+    label,
+    icon,
+    shortcut,
+    disabled = false,
+    destructive = false,
+    href,
+    onclick,
+    ...props
+  } = $props();
+
+  const ctx = getContext("dropdown");
+
+  function handleClick(e) {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    onclick?.(e);
+    ctx?.close();
+  }
+</script>
+
+{#snippet content()}
+  {#if icon}
+    <div class="item-icon">
+      <Icon {icon} width="1em" height="1em" />
+    </div>
+  {/if}
+
+  <span class="item-label">
+    {#if children}
+      {@render children()}
+    {:else}
+      {label}
+    {/if}
+  </span>
+
+  {#if shortcut}
+    <span class="item-shortcut">{shortcut}</span>
+  {/if}
+{/snippet}
+
+{#if href && !disabled}
+  <a
+    {href}
+    class="std-menu-item"
+    class:destructive
+    onclick={handleClick}
+    role="menuitem"
+    {...props}
+  >
+    {@render content()}
+  </a>
+{:else}
+  <button
+    type="button"
+    class="std-menu-item"
+    class:disabled
+    class:destructive
+    onclick={handleClick}
+    role="menuitem"
+    aria-disabled={disabled}
+    {disabled}
+    {...props}
+  >
+    {@render content()}
+  </button>
+{/if}

package/DropdownLabel.svelte

@@ -0,0 +1,11 @@
+<script>
+  let { children, label, ...props } = $props();
+</script>
+
+<div class="std-menu-label" {...props}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {label}
+  {/if}
+</div>

package/DropdownSeparator.svelte

@@ -0,0 +1 @@
+<hr class="std-menu-separator" role="separator" />

package/LauncherHint.astro

@@ -0,0 +1,35 @@
+---
+/**
+ * LauncherHint.astro
+ *
+ * Renders a small launcher hint button (⌘K).
+ * Logic for visibility/positioning is now handled by the container (e.g. Header slots).
+ */
+const {
+  title = "Open Launcher — Cmd/Ctrl+K",
+  kbd = "⌘K",
+  class: className = "",
+} = Astro.props;
+---
+
+<button
+  class={`smaller ghost text-subtle ${className}`}
+  aria-label={title}
+  title={title}
+  type="button"
+  data-launcher-toggle
+>
+  <span class="launcher-hint" aria-hidden="true">{kbd}</span>
+</button>
+
+<style>
+  .launcher-hint {
+    cursor: pointer;
+    user-select: none;
+    /* Ensure it behaves as a simple button */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-box-trim: none;
+  }
+</style>

package/Pagination.astro

@@ -0,0 +1,154 @@
+---
+/**
+ * Pagination.astro — Zero-JS pagination nav
+ *
+ * Renders a previous / page numbers / next navigation bar.
+ * Uses standard button classes (ghost, outline) from @stnd/styles.
+ *
+ * Usage:
+ *   <Pagination currentPage={2} totalPages={5} baseUrl="/chroniques/page" firstPageUrl="/chroniques" />
+ *
+ * URL pattern:
+ *   Page 1 → firstPageUrl (or baseUrl if omitted)
+ *   Page N → baseUrl/N   (e.g. /chroniques/page/2)
+ */
+import Icon from "@stnd/icon/Icon.astro";
+
+interface Props {
+  currentPage: number;
+  totalPages: number;
+  baseUrl: string;
+  /** URL for page 1 when it differs from baseUrl (e.g. "/chroniques" vs "/chroniques/page") */
+  firstPageUrl?: string;
+  class?: string;
+}
+
+const {
+  currentPage,
+  totalPages,
+  baseUrl,
+  firstPageUrl,
+  class: className,
+} = Astro.props;
+
+function pageUrl(page: number) {
+  return page === 1 ? (firstPageUrl ?? baseUrl) : `${baseUrl}/${page}`;
+}
+
+/** Build the list of page numbers to show, with ellipsis gaps. */
+function getPageNumbers(
+  current: number,
+  total: number,
+): (number | "ellipsis")[] {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  const pages: (number | "ellipsis")[] = [1];
+  if (current > 3) pages.push("ellipsis");
+  for (
+    let i = Math.max(2, current - 1);
+    i <= Math.min(total - 1, current + 1);
+    i++
+  ) {
+    pages.push(i);
+  }
+  if (current < total - 2) pages.push("ellipsis");
+  pages.push(total);
+  return pages;
+}
+
+const pages = getPageNumbers(currentPage, totalPages);
+const hasPrev = currentPage > 1;
+const hasNext = currentPage < totalPages;
+---
+
+{
+  totalPages > 1 && (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      class:list={["stnd-pagination no-bullet no-rhythm text-sm", className]}
+    >
+      <ul>
+        <li>
+          {hasPrev ? (
+            <a href={pageUrl(currentPage - 1)} class="btn ghost">
+              <Icon icon="lucide:chevron-left" />
+              Précédent
+            </a>
+          ) : (
+            <span class="btn ghost" aria-disabled="true">
+              <Icon icon="lucide:chevron-left" />
+              Précédent
+            </span>
+          )}
+        </li>
+
+        {pages.map((p) =>
+          p === "ellipsis" ? (
+            <li aria-hidden="true">
+              <span class="btn ghost icon ellipsis">
+                <Icon icon="lucide:ellipsis" />
+              </span>
+            </li>
+          ) : (
+            <li>
+              <a
+                href={pageUrl(p)}
+                class:list={[
+                  "btn page-number text-center",
+                  p === currentPage ? "outline" : "ghost",
+                ]}
+                aria-current={p === currentPage ? "page" : undefined}
+              >
+                {p}
+              </a>
+            </li>
+          ),
+        )}
+
+        <li>
+          {hasNext ? (
+            <a href={pageUrl(currentPage + 1)} class="btn ghost">
+              Suivant
+              <Icon icon="lucide:chevron-right" />
+            </a>
+          ) : (
+            <span class="btn ghost" aria-disabled="true">
+              Suivant
+              <Icon icon="lucide:chevron-right" />
+            </span>
+          )}
+        </li>
+      </ul>
+    </nav>
+  )
+}
+
+<style>
+  .stnd-pagination {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-d4);
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  .page-number {
+    justify-content: center;
+  }
+  .ellipsis {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  [aria-disabled="true"] {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+</style>