@miozu/jera 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miozu/jera",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Zero-dependency, AI-first component library for Svelte 5",
   "type": "module",
   "scripts": {

package/src/components/feedback/Toast.svelte

@@ -1,7 +1,8 @@
 <!--
   @component Toast
 
-  A toast notification system with stacking, auto-dismiss, and animations.
+  A toast notification system using native popover for top-layer rendering.
+  Provides stacking, auto-dismiss, and animations without z-index conflicts.
 
   @example
   // In your root layout
@@ -86,10 +87,11 @@
 
 <script>
   import { cn } from '../../utils/cn.svelte.js';
-  import { portal } from '../../actions/index.js';
 
   const toast = getToastContext();
 
+  let containerEl = $state(null);
+
   const icons = {
     info: `<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>`,
     success: `<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>`,
@@ -105,52 +107,82 @@
     'bottom-center': 'toast-bottom-center',
     'bottom-right': 'toast-bottom-right'
   }[toast.position]);
+
+  // Show/hide popover based on toast count
+  $effect(() => {
+    if (!containerEl) return;
+
+    if (toast.toasts.length > 0 && !containerEl.matches(':popover-open')) {
+      containerEl.showPopover();
+    } else if (toast.toasts.length === 0 && containerEl.matches(':popover-open')) {
+      containerEl.hidePopover();
+    }
+  });
 </script>
 
-{#if toast.toasts.length > 0}
-  <div use:portal class={cn('toast-container', positionClass)} role="region" aria-label="Notifications">
-    {#each toast.toasts as item (item.id)}
-      {@const remaining = item.duration - (Date.now() - item.createdAt)}
-      <div
-        class={cn('toast-item', `toast-${item.type}`)}
-        role="alert"
-        aria-live="polite"
-        onmouseenter={() => toast.pause(item.id)}
-        onmouseleave={() => toast.resume(item.id)}
-      >
-        <span class="toast-icon">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            {@html icons[item.type]}
-          </svg>
-        </span>
-        <div class="toast-content">
-          {#if item.title}
-            <p class="toast-title">{item.title}</p>
-          {/if}
-          <p class={cn('toast-message', item.title && 'has-title')}>{item.message}</p>
-        </div>
-        <button type="button" class="toast-close" onclick={() => toast.dismiss(item.id)} aria-label="Dismiss">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M18 6 6 18" /><path d="m6 6 12 12" />
-          </svg>
-        </button>
-        {#if item.duration > 0 && !item.pausedAt}
-          {@const _ = setTimeout(() => toast.dismiss(item.id), remaining)}
+<!--
+  Using popover="manual" for:
+  - Automatic top-layer placement (no z-index wars)
+  - No portal action needed
+  - Native browser rendering optimization
+-->
+<div
+  bind:this={containerEl}
+  popover="manual"
+  class={cn('toast-container', positionClass)}
+  role="region"
+  aria-label="Notifications"
+>
+  {#each toast.toasts as item (item.id)}
+    {@const remaining = item.duration - (Date.now() - item.createdAt)}
+    <div
+      class={cn('toast-item', `toast-${item.type}`)}
+      role="alert"
+      aria-live="polite"
+      onmouseenter={() => toast.pause(item.id)}
+      onmouseleave={() => toast.resume(item.id)}
+    >
+      <span class="toast-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          {@html icons[item.type]}
+        </svg>
+      </span>
+      <div class="toast-content">
+        {#if item.title}
+          <p class="toast-title">{item.title}</p>
         {/if}
+        <p class={cn('toast-message', item.title && 'has-title')}>{item.message}</p>
       </div>
-    {/each}
-  </div>
-{/if}
+      <button type="button" class="toast-close" onclick={() => toast.dismiss(item.id)} aria-label="Dismiss">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+        </svg>
+      </button>
+      {#if item.duration > 0 && !item.pausedAt}
+        {@const _ = setTimeout(() => toast.dismiss(item.id), remaining)}
+      {/if}
+    </div>
+  {/each}
+</div>
 
 <style>
+  /* Popover container - in top-layer, no z-index needed */
   .toast-container {
     position: fixed;
-    z-index: 9999;
     display: flex;
     gap: 0.5rem;
     pointer-events: none;
+    /* Reset popover defaults */
+    border: none;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    /* Remove default popover positioning */
+    inset: unset;
   }
 
+  /* Position variants */
   .toast-top-left { top: 1rem; left: 1rem; flex-direction: column; }
   .toast-top-center { top: 1rem; left: 50%; transform: translateX(-50%); flex-direction: column; }
   .toast-top-right { top: 1rem; right: 1rem; flex-direction: column; }

package/src/components/overlays/Modal.svelte

@@ -1,7 +1,8 @@
 <!--
   @component Modal
 
-  A flexible modal dialog component with backdrop, focus trap, and escape key support.
+  A flexible modal dialog component using native <dialog> element.
+  Provides built-in focus trap, ESC handling, backdrop, and accessibility.
 
   @example
   <Modal bind:open={showModal} title="Confirm Action">
@@ -13,9 +14,6 @@
   </Modal>
 -->
 <script>
-  import { focusTrap, escapeKey, portal } from '../../actions/index.js';
-  import { cv } from '../../utils/cn.svelte.js';
-
   let {
     open = $bindable(false),
     title = '',
@@ -31,6 +29,8 @@
     class: className = ''
   } = $props();
 
+  let dialogEl = $state(null);
+
   // Variant styles for the icon container
   const iconVariants = {
     default: { bg: 'var(--color-base02)', color: 'var(--color-base05)' },
@@ -42,118 +42,170 @@
 
   const iconStyle = $derived(iconVariants[variant] || iconVariants.default);
 
-  function close() {
+  // Sync open state with native dialog
+  $effect(() => {
+    if (!dialogEl) return;
+
+    if (open && !dialogEl.open) {
+      dialogEl.showModal();
+    } else if (!open && dialogEl.open) {
+      dialogEl.close();
+    }
+  });
+
+  // Handle native close event (ESC key, form[method=dialog], etc.)
+  function handleClose() {
     open = false;
     onclose();
   }
 
+  // Handle cancel event (ESC key) - can be prevented
+  function handleCancel(e) {
+    if (!closeOnEscape) {
+      e.preventDefault();
+    }
+  }
+
+  // Handle backdrop click (click on dialog element itself, not content)
   function handleBackdropClick(e) {
-    if (closeOnBackdrop && e.target === e.currentTarget) {
-      close();
+    if (closeOnBackdrop && e.target === dialogEl) {
+      dialogEl.close();
     }
   }
 
-  function handleEscape() {
-    if (closeOnEscape) {
-      close();
+  function close() {
+    if (dialogEl?.open) {
+      dialogEl.close();
     }
   }
 </script>
 
-{#if open}
-  <div
-    class="modal-backdrop"
-    onclick={handleBackdropClick}
-    role="dialog"
-    aria-modal="true"
-    aria-labelledby={title ? 'modal-title' : undefined}
-    use:portal={'body'}
-    use:focusTrap={{ enabled: open }}
-    use:escapeKey={handleEscape}
-  >
-    <div class="modal modal-{size} {className}">
-      <!-- Close button -->
-      {#if showClose}
-        <button
-          class="modal-close"
-          onclick={close}
-          aria-label="Close modal"
-          type="button"
-        >
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <line x1="18" y1="6" x2="6" y2="18"></line>
-            <line x1="6" y1="6" x2="18" y2="18"></line>
-          </svg>
-        </button>
-      {/if}
-
-      <!-- Content -->
-      <div class="modal-content">
-        {#if icon || title}
-          <div class="modal-header">
-            {#if icon}
-              <div class="modal-icon" style="background: {iconStyle.bg}; color: {iconStyle.color};">
-                {@render icon()}
-              </div>
-            {/if}
+<dialog
+  bind:this={dialogEl}
+  class="modal modal-{size} {className}"
+  aria-labelledby={title ? 'modal-title' : undefined}
+  onclose={handleClose}
+  oncancel={handleCancel}
+  onclick={handleBackdropClick}
+>
+  <!-- Close button -->
+  {#if showClose}
+    <button
+      class="modal-close"
+      onclick={close}
+      aria-label="Close modal"
+      type="button"
+    >
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
+    </button>
+  {/if}
 
-            {#if title || children}
-              <div class="modal-text">
-                {#if title}
-                  <h3 id="modal-title" class="modal-title">{title}</h3>
-                {/if}
-                {#if children}
-                  <div class="modal-body">
-                    {@render children()}
-                  </div>
-                {/if}
-              </div>
-            {/if}
-          </div>
-        {:else if children}
-          <div class="modal-body">
-            {@render children()}
+  <!-- Content -->
+  <div class="modal-content">
+    {#if icon || title}
+      <div class="modal-header">
+        {#if icon}
+          <div class="modal-icon" style="background: {iconStyle.bg}; color: {iconStyle.color};">
+            {@render icon()}
           </div>
         {/if}
 
-        {#if footer}
-          <div class="modal-footer">
-            {@render footer()}
+        {#if title || children}
+          <div class="modal-text">
+            {#if title}
+              <h3 id="modal-title" class="modal-title">{title}</h3>
+            {/if}
+            {#if children}
+              <div class="modal-body">
+                {@render children()}
+              </div>
+            {/if}
           </div>
         {/if}
       </div>
-    </div>
+    {:else if children}
+      <div class="modal-body">
+        {@render children()}
+      </div>
+    {/if}
+
+    {#if footer}
+      <div class="modal-footer">
+        {@render footer()}
+      </div>
+    {/if}
   </div>
-{/if}
+</dialog>
 
 <style>
-  .modal-backdrop {
+  /* Native dialog element - automatically in top-layer */
+  dialog.modal {
     position: fixed;
-    inset: 0;
-    z-index: 100;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: color-mix(in srgb, var(--color-base00) 80%, transparent);
-    backdrop-filter: blur(4px);
-  }
-
-  .modal {
-    position: relative;
-    background: var(--color-base01);
+    border: none;
     border-radius: 0.75rem;
+    background: var(--color-base01);
     box-shadow: var(--shadow-2xl);
     border: 1px solid var(--color-base03);
-    margin: 1rem;
-    animation: modal-enter 0.2s ease-out;
+    padding: 0;
+    margin: auto;
+    max-height: calc(100vh - 2rem);
+    overflow: auto;
   }
 
   /* Size variants */
-  .modal-sm { width: 100%; max-width: 20rem; }
-  .modal-md { width: 100%; max-width: 28rem; }
-  .modal-lg { width: 100%; max-width: 36rem; }
-  .modal-xl { width: 100%; max-width: 48rem; }
-  .modal-full { width: 100%; max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); }
+  dialog.modal-sm { width: 100%; max-width: 20rem; }
+  dialog.modal-md { width: 100%; max-width: 28rem; }
+  dialog.modal-lg { width: 100%; max-width: 36rem; }
+  dialog.modal-xl { width: 100%; max-width: 48rem; }
+  dialog.modal-full { width: calc(100vw - 2rem); max-width: calc(100vw - 2rem); }
+
+  /* Native backdrop - automatically handled by browser */
+  dialog.modal::backdrop {
+    background: color-mix(in srgb, var(--color-base00) 80%, transparent);
+    backdrop-filter: blur(4px);
+  }
+
+  /* Entry/exit animations using @starting-style */
+  dialog.modal[open] {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+
+  @starting-style {
+    dialog.modal[open] {
+      opacity: 0;
+      transform: scale(0.95) translateY(10px);
+    }
+  }
+
+  dialog.modal[open]::backdrop {
+    opacity: 1;
+  }
+
+  @starting-style {
+    dialog.modal[open]::backdrop {
+      opacity: 0;
+    }
+  }
+
+  /* Transitions for smooth open/close */
+  dialog.modal {
+    transition:
+      opacity 0.2s ease-out,
+      transform 0.2s ease-out,
+      overlay 0.2s ease-out allow-discrete,
+      display 0.2s ease-out allow-discrete;
+  }
+
+  dialog.modal::backdrop {
+    transition:
+      opacity 0.2s ease-out,
+      overlay 0.2s ease-out allow-discrete,
+      display 0.2s ease-out allow-discrete;
+  }
 
   .modal-close {
     position: absolute;
@@ -166,6 +218,7 @@
     color: var(--color-base05);
     cursor: pointer;
     transition: background 0.15s, color 0.15s;
+    z-index: 1;
   }
 
   .modal-close:hover {
@@ -218,15 +271,4 @@
     margin-top: 1.5rem;
     justify-content: flex-end;
   }
-
-  @keyframes modal-enter {
-    from {
-      opacity: 0;
-      transform: scale(0.95) translateY(10px);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1) translateY(0);
-    }
-  }
 </style>

package/src/components/overlays/Popover.svelte

@@ -1,7 +1,8 @@
 <!--
   @component Popover
 
-  A tooltip/popover component with smart positioning and hover interaction.
+  A tooltip/popover component with CSS Anchor Positioning (with JS fallback).
+  Uses native popover API for top-layer rendering.
 
   @example
   <Popover content="This is helpful information" position="top">
@@ -28,14 +29,22 @@
     class: className = ''
   } = $props();
 
+  // Feature detection for CSS Anchor Positioning
+  const supportsAnchor = typeof CSS !== 'undefined' && CSS.supports('anchor-name', '--test');
+
   let visible = $state(false);
   let timeoutId = $state(null);
   let popoverEl = $state(null);
   let triggerEl = $state(null);
   let isHoveringPopover = $state(false);
+
+  // Only needed for JS fallback
   let windowWidth = $state(0);
   let windowHeight = $state(0);
 
+  // Generate unique anchor name for this instance
+  const anchorName = `--popover-anchor-${Math.random().toString(36).slice(2, 9)}`;
+
   // Animation configs based on position
   const animations = {
     top: { in: { y: 8, duration: 200 }, out: { y: -8, duration: 150 } },
@@ -51,11 +60,14 @@
     triggerEl = event.currentTarget;
     timeoutId = setTimeout(() => {
       visible = true;
-      requestAnimationFrame(() => {
+      // For JS fallback, position after render
+      if (!supportsAnchor) {
         requestAnimationFrame(() => {
-          positionPopover();
+          requestAnimationFrame(() => {
+            positionPopover();
+          });
         });
-      });
+      }
     }, delay.show);
   }
 
@@ -78,8 +90,9 @@
     handleMouseLeave();
   }
 
+  // JS fallback positioning (only used when CSS Anchor not supported)
   function positionPopover() {
-    if (!popoverEl || !triggerEl) return;
+    if (!popoverEl || !triggerEl || supportsAnchor) return;
 
     const triggerRect = triggerEl.getBoundingClientRect();
     const popoverWidth = popoverEl.offsetWidth;
@@ -138,21 +151,25 @@
   }
 
   function handleScroll() {
-    if (visible && triggerEl && popoverEl) {
+    if (visible && triggerEl && popoverEl && !supportsAnchor) {
       requestAnimationFrame(positionPopover);
     }
   }
 </script>
 
-<svelte:window
-  bind:innerWidth={windowWidth}
-  bind:innerHeight={windowHeight}
-  onscroll={visible ? handleScroll : undefined}
-  onresize={visible ? handleScroll : undefined}
-/>
+<!-- Only bind window for JS fallback -->
+{#if !supportsAnchor}
+  <svelte:window
+    bind:innerWidth={windowWidth}
+    bind:innerHeight={windowHeight}
+    onscroll={visible ? handleScroll : undefined}
+    onresize={visible ? handleScroll : undefined}
+  />
+{/if}
 
 <div
   class="popover-wrapper {className}"
+  style={supportsAnchor ? `anchor-name: ${anchorName};` : ''}
   onmouseenter={handleMouseEnter}
   onmouseleave={handleMouseLeave}
 >
@@ -161,6 +178,10 @@
   {#if visible}
     <div
       class="popover"
+      class:popover-anchor={supportsAnchor}
+      class:popover-js={!supportsAnchor}
+      data-position={position}
+      style={supportsAnchor ? `position-anchor: ${anchorName}; --offset: ${offset}px;` : ''}
       role="tooltip"
       in:fly={anim.in}
       out:fly={anim.out}
@@ -186,8 +207,6 @@
   }
 
   .popover {
-    position: fixed;
-    z-index: 9999;
     min-width: 8rem;
     max-width: 18rem;
     width: max-content;
@@ -203,4 +222,44 @@
     word-wrap: break-word;
     hyphens: auto;
   }
+
+  /* CSS Anchor Positioning (Chrome 125+) */
+  .popover-anchor {
+    position: absolute;
+    inset: unset;
+
+    /* Position based on data-position attribute */
+    &[data-position='top'] {
+      bottom: calc(anchor(top) + var(--offset));
+      left: anchor(center);
+      translate: -50% 0;
+    }
+
+    &[data-position='bottom'] {
+      top: calc(anchor(bottom) + var(--offset));
+      left: anchor(center);
+      translate: -50% 0;
+    }
+
+    &[data-position='left'] {
+      right: calc(anchor(left) + var(--offset));
+      top: anchor(center);
+      translate: 0 -50%;
+    }
+
+    &[data-position='right'] {
+      left: calc(anchor(right) + var(--offset));
+      top: anchor(center);
+      translate: 0 -50%;
+    }
+
+    /* Auto-flip when near viewport edges */
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+  }
+
+  /* JS Fallback positioning */
+  .popover-js {
+    position: fixed;
+    z-index: 9999;
+  }
 </style>