@stnd/ui 0.5.0

package/TableOfContents.astro

@@ -0,0 +1,217 @@
+---
+/**
+ * @component TableOfContents
+ * @description Subtle Notion-style TOC — small lines fixed to the right side
+ * that expand with heading labels on hover and highlight the current section.
+ *
+ * Usage:
+ *   import TableOfContents from "@stnd/ui/TableOfContents.astro";
+ *   <TableOfContents {headings} />
+ *
+ * Extract headings from rendered HTML:
+ *   const headings = [];
+ *   const headingRegex = /<h([23])\s[^>]*id="([^"]*)"[^>]*>(.*?)<\/h\1>/gi;
+ *   let m;
+ *   while ((m = headingRegex.exec(html)) !== null) {
+ *     headings.push({ depth: parseInt(m[1]), text: m[3].replace(/<[^>]+>/g, "").trim(), slug: m[2] });
+ *   }
+ */
+
+interface Heading {
+  depth: number;
+  text: string;
+  slug: string;
+}
+
+interface Props {
+  headings: Heading[];
+  /** Minimum headings to show the TOC. Default: 2 */
+  minHeadings?: number;
+  /** Breakpoint to hide on mobile. Default: 1100 */
+  breakpoint?: number;
+}
+
+const { headings, minHeadings = 2 } = Astro.props;
+const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
+---
+
+{
+  tocHeadings.length >= minHeadings && (
+    <nav class="stnd-toc" aria-label="Table des matières">
+      {tocHeadings.map((h) => (
+        <a
+          href={`#${h.slug}`}
+          class="toc-item"
+          data-slug={h.slug}
+          data-depth={h.depth}
+          aria-label={h.text}
+        >
+          <span class="toc-label">{h.text}</span>
+          <span class="toc-bar" />
+        </a>
+      ))}
+    </nav>
+  )
+}
+
+<style>
+  .stnd-toc {
+    position: fixed;
+    right: var(--space);
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-d8);
+    z-index: 10;
+    padding: var(--space-d2);
+    align-items: flex-end;
+    opacity: 0;
+    transition: all var(--transition);
+  }
+
+  .stnd-toc[data-visible],
+  .stnd-toc:hover {
+    opacity: 1;
+  }
+
+  .stnd-toc:hover {
+    gap: var(--space);
+  }
+
+  .toc-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-d4);
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .toc-label {
+    font-size: var(--size-sm);
+    color: var(--color-foreground);
+    font-family: var(--font-interface);
+    font-weight: var(--font-weight-bold);
+
+    white-space: nowrap;
+    max-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    opacity: 0;
+    transition: all var(--transition-fast);
+  }
+
+  .toc-bar {
+    display: block;
+    height: var(--space-d6);
+    border-radius: var(--radius);
+    background: var(--color-subtle);
+    opacity: 0.35;
+    transition: all var(--transition);
+    flex-shrink: 0;
+  }
+
+  .toc-item[data-depth="2"] .toc-bar {
+    width: var(--space);
+  }
+
+  .toc-item[data-depth="3"] .toc-label {
+    margin-right: var(--space-d2);
+  }
+  .toc-item[data-depth="3"] .toc-bar {
+    width: var(--space-d2);
+  }
+
+  /* Hover: expand labels, brighten bars */
+  .stnd-toc:hover .toc-label {
+    max-width: 16em;
+    opacity: 0.6;
+  }
+
+  .stnd-toc:hover .toc-item:hover .toc-label {
+    opacity: 1;
+  }
+
+  .stnd-toc:hover .toc-bar {
+    opacity: 1;
+    background: var(--color-muted);
+  }
+
+  .toc-item:hover .toc-bar {
+    opacity: 1 !important;
+  }
+
+  /* Active section */
+  .toc-item[data-active] .toc-bar {
+    opacity: 1;
+    background: var(--color-foreground);
+
+  }
+
+  .toc-item[data-active] .toc-label {
+    opacity: 1 !important;
+  }
+
+  @media (max-width: 1100px) {
+    .stnd-toc {
+      display: none;
+    }
+  }
+</style>
+
+<script>
+  document.addEventListener("astro:page-load", () => {
+    const toc = document.querySelector<HTMLElement>(".stnd-toc");
+    const tocLinks = document.querySelectorAll<HTMLElement>(".toc-item[data-slug]");
+    if (tocLinks.length === 0) return;
+
+    // Show on scroll or mouse move, hide after inactivity
+    let hideTimer: ReturnType<typeof setTimeout>;
+    const show = () => {
+      toc?.setAttribute("data-visible", "");
+      clearTimeout(hideTimer);
+      hideTimer = setTimeout(() => toc?.removeAttribute("data-visible"), 2500);
+    };
+    window.addEventListener("scroll", show, { passive: true });
+    window.addEventListener("mousemove", show, { passive: true });
+    toc?.addEventListener("mouseenter", () => {
+      clearTimeout(hideTimer);
+      toc.setAttribute("data-visible", "");
+    });
+    toc?.addEventListener("mouseleave", () => {
+      hideTimer = setTimeout(() => toc.removeAttribute("data-visible"), 2500);
+    });
+
+    const ids = [...tocLinks].map((a) => a.dataset.slug!);
+    const targets = ids
+      .map((id) => document.getElementById(id))
+      .filter(Boolean) as HTMLElement[];
+
+    if (targets.length === 0) return;
+
+    let current = ids[0];
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter((e) => e.isIntersecting)
+          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+
+        if (visible.length > 0) {
+          current = visible[0].target.id;
+        }
+
+        tocLinks.forEach((link) => {
+          if (link.dataset.slug === current) {
+            link.setAttribute("data-active", "");
+          } else {
+            link.removeAttribute("data-active");
+          }
+        });
+      },
+      { rootMargin: "0px 0px -65% 0px", threshold: 0 },
+    );
+
+    targets.forEach((el) => observer.observe(el));
+  });
+</script>

package/Toast.astro

@@ -0,0 +1,202 @@
+---
+// sToastSystem.astro - Zero-dependency notification system
+---
+
+<div id="toast-container" aria-live="polite" aria-atomic="true"></div>
+
+<style>
+  #toast-container {
+    position: fixed;
+    top: var(--space-2);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 9999999;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-half);
+    pointer-events: none;
+    margin: 0;
+  }
+
+  :global(.toast-item) {
+    color: var(--color-foreground);
+    border-radius: var(--radius);
+    border: var(--border);
+    padding: var(--space-half) var(--space-half);
+    font-family: var(--font-interface);
+    font-size: var(--scale-d3);
+    pointer-events: auto;
+    box-shadow: var(--shadow-glow);
+    backdrop-filter: var(--filter-glass);
+    background: var(--color-glass);
+    margin: 0 auto;
+
+    /* Animation setup */
+    opacity: 0;
+    filter: var(--filter-glass);
+    transition: all var(--transition);
+  }
+
+  :global(.toast-item.show) {
+    opacity: 1;
+    filter: blur(0);
+  }
+
+  :global(.toast-item.error) {
+    border-color: color-mix(
+      in srgb,
+      var(--color-border) 75%,
+      var(--color-error)
+    );
+  }
+  :global(.toast-item.success) {
+    border-color: color-mix(
+      in srgb,
+      var(--color-border) 75%,
+      var(--color-success)
+    );
+  }
+  :global(.toast-item.info) {
+    border-color: color-mix(
+      in srgb,
+      var(--color-border) 75%,
+      var(--color-info)
+    );
+  }
+  :global(.toast-item.warning) {
+    border-color: color-mix(
+      in srgb,
+      var(--color-border) 75,
+      var(--color-warning)
+    );
+  }
+
+  /* Mobile adjustments */
+  @media (max-width: 640px) {
+    #toast-container {
+      left: var(--space);
+      right: var(--space);
+      bottom: var(--space);
+      transform: none;
+    }
+
+    :global(.toast-item) {
+      text-align: center;
+      min-width: auto;
+    }
+  }
+</style>
+
+<script>
+  import { navigate } from "astro:transitions/client";
+
+  function initToastSystem() {
+    // Prevent duplicate listeners across re-renders
+    if ((window as any)._toastListenerAdded) return;
+
+    const container = document.getElementById("toast-container");
+    if (!container) return;
+
+    // Listen for custom 'toast' events (only add once)
+    window.addEventListener("toast", ((e: CustomEvent) => {
+      const { message, type = "default", duration = 4000, action } = e.detail;
+
+      // Create toast element
+      const toast = document.createElement("div");
+      toast.className = `toast-item ${type}`;
+
+      const messageSpan = document.createElement("span");
+      messageSpan.className = "toast-message";
+      messageSpan.textContent = message;
+      toast.appendChild(messageSpan);
+
+      // If an action was provided, render a button
+      if (action && action.label) {
+        const btn = document.createElement("button");
+        btn.className = "toast-action";
+        btn.type = "button";
+        btn.textContent = action.label;
+        btn.addEventListener("click", (ev) => {
+          ev.stopPropagation();
+          // Optionally close toast immediately
+          toast.classList.remove("show");
+
+          // Use declarative data-gate attributes so StandardGate handles it
+          if (action && action.view) {
+            try {
+              // If the view looks like a command (starts with ::), use data-gate-trigger
+              if (String(action.view).startsWith("::")) {
+                const tmp = document.createElement("button");
+                tmp.setAttribute("data-gate-trigger", action.view);
+                tmp.style.display = "none";
+                document.body.appendChild(tmp);
+                tmp.click();
+                tmp.remove();
+              } else {
+                // Otherwise treat as a prompt (initial query)
+                const tmp = document.createElement("button");
+                tmp.setAttribute("data-gate-prompt", action.view);
+                tmp.style.display = "none";
+                document.body.appendChild(tmp);
+                tmp.click();
+                tmp.remove();
+              }
+            } catch (err) {
+              console.warn("toast action view failed", err);
+            }
+          } else if (
+            action &&
+            action.onClick &&
+            typeof window[action.onClick] === "function"
+          ) {
+            try {
+              window[action.onClick]();
+            } catch (err) {
+              console.warn("toast action failed", err);
+            }
+          }
+        });
+        toast.appendChild(btn);
+      }
+
+      // Add to DOM
+      container.appendChild(toast);
+
+      // Trigger animation (next frame)
+      requestAnimationFrame(() => {
+        toast.classList.add("show");
+      });
+
+      // Remove after duration
+      setTimeout(() => {
+        toast.classList.remove("show");
+        toast.style.opacity = "0";
+
+        // Wait for CSS transition before removing from DOM
+        setTimeout(() => toast.remove(), 1000);
+      }, duration);
+    }) as EventListener);
+
+    (window as any)._toastListenerAdded = true;
+  }
+
+  // Initialize
+  initToastSystem();
+
+  // Global helpers for non-module scripts
+  const win = window as any;
+
+  win.toast = (
+    message: string,
+    type: string = "default",
+    duration: number = 2000,
+    action: { label?: string; view?: string; onClick?: string } | null = null,
+  ) => {
+    const detail = { message, type, duration };
+    if (action) detail.action = action;
+    window.dispatchEvent(new CustomEvent("toast", { detail }));
+  };
+
+  // Re-initialize after Astro view transitions (but only add listener once)
+  document.addEventListener("astro:page-load", initToastSystem);
+</script>

package/dialog.js

@@ -0,0 +1,53 @@
+import { writable } from "svelte/store";
+import { provide } from "@stnd/store";
+
+/**
+ * @typedef {Object} DialogOptions
+ * @property {string} [title]
+ * @property {string} [description]
+ * @property {string} [confirmLabel]
+ * @property {string} [cancelLabel]
+ * @property {'neutral' | 'danger'} [intent]
+ */
+
+export const dialogState = writable({
+  open: false,
+  title: "",
+  description: "",
+  confirmLabel: "Continue",
+  cancelLabel: "Cancel",
+  intent: "danger",
+  onconfirm: null,
+  oncancel: null,
+});
+
+/**
+ * Open a confirmation dialog
+ * @param {DialogOptions} options
+ * @returns {Promise<boolean>} Resolves true if confirmed, false if canceled
+ */
+export function confirm(options) {
+  return new Promise((resolve) => {
+    dialogState.set({
+      open: true,
+      title: options.title || "Are you sure?",
+      description: options.description || "",
+      confirmLabel: options.confirmLabel || "Continue",
+      cancelLabel: options.cancelLabel || "Cancel",
+      intent: options.intent || "neutral",
+      onconfirm: () => {
+        resolve(true);
+        dialogState.update((s) => ({ ...s, open: false }));
+      },
+      oncancel: () => {
+        resolve(false);
+        dialogState.update((s) => ({ ...s, open: false }));
+      },
+    });
+  });
+}
+
+// Register the confirm function and dialogState in the runtime store so any
+// module can trigger a dialog via inject("dialog").confirm(...) or
+// subscribe to inject("dialog").state.
+provide("dialog", { confirm, state: dialogState });

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@stnd/ui",
+  "version": "0.5.0",
+  "type": "module",
+  "svelte": "./Combobox.svelte",
+  "exports": {
+    "./transitions.js": "./transitions.js",
+    "./ui/*.astro": "./ui/*.astro",
+    "./ui/*.svelte": "./ui/*.svelte",
+    "./ui/*": {
+      "astro": "./ui/*.astro",
+      "svelte": "./ui/*.svelte",
+      "default": "./ui/*.astro"
+    },
+    "./*.astro": "./*.astro",
+    "./*.svelte": "./*.svelte",
+    "./*": {
+      "astro": "./*.astro",
+      "svelte": "./*.svelte",
+      "default": "./*.astro"
+    }
+  },
+  "peerDependencies": {
+    "astro": ">=5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "wrangler": "^4.105.0",
+    "@stnd/icon": "0.2.0",
+    "@stnd/store": "0.5.0",
+    "@stnd/utils": "0.5.0"
+  }
+}

package/transitions.js

@@ -0,0 +1,78 @@
+/**
+ * Standard Garden Centralized Transitions
+ * Combines standard Svelte transitions with custom UI transitions (blur, scale)
+ * using unified default durations and easings.
+ */
+
+import { fade as svelteFade, slide as svelteSlide, fly as svelteFly } from "svelte/transition";
+import { quintOut } from "svelte/easing";
+
+// Standard default transition settings matching Standard UI tokens
+const DEFAULT_DURATION = 250;
+const DEFAULT_EASING = quintOut;
+
+/**
+ * Standard Fade
+ */
+export function fade(node, { duration = DEFAULT_DURATION, easing = DEFAULT_EASING, ...opts } = {}) {
+  return svelteFade(node, { duration, easing, ...opts });
+}
+
+/**
+ * Standard Slide
+ */
+export function slide(node, { duration = DEFAULT_DURATION, easing = DEFAULT_EASING, ...opts } = {}) {
+  return svelteSlide(node, { duration, easing, ...opts });
+}
+
+/**
+ * Standard Fly
+ */
+export function fly(node, { duration = DEFAULT_DURATION, easing = DEFAULT_EASING, ...opts } = {}) {
+  return svelteFly(node, { duration, easing, ...opts });
+}
+
+/**
+ * Fade + Blur transition
+ * Animates opacity and backdrop-filter blur together
+ */
+export function blurFade(node, { duration = DEFAULT_DURATION, maxBlur = 20, easing = DEFAULT_EASING } = {}) {
+  return {
+    duration,
+    easing,
+    css: (t) => `
+            opacity: ${t};
+            backdrop-filter: blur(${t * maxBlur}px);
+        `,
+  };
+}
+
+/**
+ * Scale + Blur + Fade transition
+ * Combines scale, blur, and fade for modal-like elements
+ */
+export function scaleBlurFade(
+  node,
+  { duration = DEFAULT_DURATION, maxBlur = 20, start = 0.95, easing = DEFAULT_EASING } = {},
+) {
+  return {
+    duration,
+    easing,
+    css: (t) => `
+            opacity: ${t};
+            transform: scale(${start + (1 - start) * t});
+            backdrop-filter: blur(${t * maxBlur}px);
+        `,
+  };
+}
+
+/**
+ * Blur transition (backdrop only, no fade)
+ */
+export function blur(node, { duration = DEFAULT_DURATION, maxBlur = 8, easing = DEFAULT_EASING } = {}) {
+  return {
+    duration,
+    easing,
+    css: (t) => `backdrop-filter: blur(${t * maxBlur}px);`,
+  };
+}