@miozu/jera 0.3.0 → 0.4.2

package/src/components/feedback/Toast.svelte

@@ -2,78 +2,37 @@
   @component Toast
 
   A toast notification system with stacking, auto-dismiss, and animations.
-  Demonstrates advanced Svelte 5 patterns:
-
-  - Reactive class with ThemeState pattern
-  - $state.raw for non-proxied arrays (performance)
-  - $effect with cleanup for timers
-  - Context API for global toast access
-  - Portal action for DOM placement
-  - Compound variant styling
 
   @example
   // In your root layout
-  <ToastProvider>
-    <slot />
-  </ToastProvider>
+  <script>
+    import { Toast, createToastContext } from '@miozu/jera';
+    const toast = createToastContext();
+  </script>
+  <Toast />
 
   // In any component
-  import { toast } from '@miozu/jera';
+  import { getToastContext } from '@miozu/jera';
+  const toast = getToastContext();
   toast.success('Saved successfully!');
-  toast.error('Something went wrong');
-  toast.info('Did you know?');
-  toast.custom({ title: 'Custom', message: 'With title', duration: 5000 });
 -->
 <script module>
   import { getContext, setContext } from 'svelte';
-  import { cv } from '../../utils/cn.svelte.js';
 
   const TOAST_KEY = Symbol('jera-toast');
 
-  /**
-   * @typedef {'info' | 'success' | 'warning' | 'error'} ToastType
-   * @typedef {'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'} ToastPosition
-   *
-   * @typedef {{
-   *   id: string,
-   *   type: ToastType,
-   *   title?: string,
-   *   message: string,
-   *   duration: number,
-   *   createdAt: number,
-   *   pausedAt?: number
-   * }} ToastItem
-   */
-
   /**
    * Toast Controller Class
-   *
-   * Manages toast state and provides methods for showing toasts.
-   * Uses Svelte 5 reactive class pattern.
    */
   export class ToastController {
-    /** @type {ToastItem[]} */
     toasts = $state.raw([]);
-
-    /** @type {ToastPosition} */
     position = $state('bottom-right');
-
-    /** @type {number} */
     defaultDuration = 4000;
-
-    /** @type {number} */
     maxToasts = 5;
-
     #counter = 0;
 
-    /**
-     * Show a toast
-     * @param {Partial<ToastItem> & { message: string }} options
-     * @returns {string} Toast ID
-     */
     show(options) {
       const id = `toast-${++this.#counter}`;
-
       const toast = {
         id,
         type: options.type ?? 'info',
@@ -82,196 +41,99 @@
         duration: options.duration ?? this.defaultDuration,
         createdAt: Date.now()
       };
-
-      // Add to beginning (newest first for top positions)
       this.toasts = [toast, ...this.toasts].slice(0, this.maxToasts);
-
       return id;
     }
 
-    /**
-     * Dismiss a toast by ID
-     * @param {string} id
-     */
     dismiss(id) {
       this.toasts = this.toasts.filter(t => t.id !== id);
     }
 
-    /**
-     * Dismiss all toasts
-     */
     dismissAll() {
       this.toasts = [];
     }
 
-    /**
-     * Pause a toast's auto-dismiss timer
-     * @param {string} id
-     */
     pause(id) {
       this.toasts = this.toasts.map(t =>
         t.id === id ? { ...t, pausedAt: Date.now() } : t
       );
     }
 
-    /**
-     * Resume a toast's auto-dismiss timer
-     * @param {string} id
-     */
     resume(id) {
       this.toasts = this.toasts.map(t => {
         if (t.id !== id || !t.pausedAt) return t;
         const pausedDuration = Date.now() - t.pausedAt;
-        return {
-          ...t,
-          createdAt: t.createdAt + pausedDuration,
-          pausedAt: undefined
-        };
+        return { ...t, createdAt: t.createdAt + pausedDuration, pausedAt: undefined };
       });
     }
 
-    // Convenience methods
     info = (message, options = {}) => this.show({ ...options, message, type: 'info' });
     success = (message, options = {}) => this.show({ ...options, message, type: 'success' });
     warning = (message, options = {}) => this.show({ ...options, message, type: 'warning' });
     error = (message, options = {}) => this.show({ ...options, message, type: 'error' });
   }
 
-  /**
-   * Create toast context (call in ToastProvider)
-   */
   export function createToastContext() {
     const controller = new ToastController();
     setContext(TOAST_KEY, controller);
     return controller;
   }
 
-  /**
-   * Get toast controller from context
-   * @returns {ToastController}
-   */
   export function getToastContext() {
     return getContext(TOAST_KEY);
   }
-
-  // Toast styles
-  export const toastStyles = cv({
-    base: [
-      'relative flex items-start gap-3 w-full max-w-sm',
-      'p-4 rounded-lg shadow-lg',
-      'border',
-      'animate-in fade-in slide-in-from-right-4 duration-200'
-    ].join(' '),
-
-    variants: {
-      type: {
-        info: 'bg-surface border-border text-text',
-        success: 'bg-success/10 border-success/30 text-success',
-        warning: 'bg-warning/10 border-warning/30 text-warning',
-        error: 'bg-error/10 border-error/30 text-error'
-      }
-    },
-
-    defaults: { type: 'info' }
-  });
-
-  export const positionStyles = {
-    'top-left': 'top-4 left-4 flex-col',
-    'top-center': 'top-4 left-1/2 -translate-x-1/2 flex-col',
-    'top-right': 'top-4 right-4 flex-col',
-    'bottom-left': 'bottom-4 left-4 flex-col-reverse',
-    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2 flex-col-reverse',
-    'bottom-right': 'bottom-4 right-4 flex-col-reverse'
-  };
 </script>
 
 <script>
   import { cn } from '../../utils/cn.svelte.js';
   import { portal } from '../../actions/index.js';
 
-  // Get toast controller from context
   const toast = getToastContext();
 
-  // Icon components for each type
   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"/>`,
     warning: `<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>`,
     error: `<circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/>`
   };
+
+  const positionClass = $derived({
+    'top-left': 'toast-top-left',
+    'top-center': 'toast-top-center',
+    'top-right': 'toast-top-right',
+    'bottom-left': 'toast-bottom-left',
+    'bottom-center': 'toast-bottom-center',
+    'bottom-right': 'toast-bottom-right'
+  }[toast.position]);
 </script>
 
 {#if toast.toasts.length > 0}
-  <div
-    use:portal
-    class={cn(
-      'fixed z-[var(--z-toast)] flex gap-2 pointer-events-none',
-      positionStyles[toast.position]
-    )}
-    role="region"
-    aria-label="Notifications"
-  >
+  <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(toastStyles({ type: item.type }), 'pointer-events-auto')}
+        class={cn('toast-item', `toast-${item.type}`)}
         role="alert"
         aria-live="polite"
         onmouseenter={() => toast.pause(item.id)}
         onmouseleave={() => toast.resume(item.id)}
       >
-        <!-- Icon -->
-        <span class="shrink-0 w-5 h-5">
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
+        <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>
-
-        <!-- Content -->
-        <div class="flex-1 min-w-0">
+        <div class="toast-content">
           {#if item.title}
-            <p class="font-medium text-sm">{item.title}</p>
+            <p class="toast-title">{item.title}</p>
           {/if}
-          <p class={cn('text-sm', item.title && 'mt-1 opacity-90')}>
-            {item.message}
-          </p>
+          <p class={cn('toast-message', item.title && 'has-title')}>{item.message}</p>
         </div>
-
-        <!-- Close Button -->
-        <button
-          type="button"
-          class={cn(
-            'shrink-0 p-1 rounded-md',
-            'opacity-60 hover:opacity-100',
-            'transition-opacity duration-150',
-            'focus:outline-none focus-visible:ring-2 focus-visible:ring-current/50'
-          )}
-          onclick={() => toast.dismiss(item.id)}
-          aria-label="Dismiss notification"
-        >
-          <svg
-            class="w-4 h-4"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M18 6 6 18" />
-            <path d="m6 6 12 12" />
+        <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>
-
-        <!-- Auto-dismiss timer -->
         {#if item.duration > 0 && !item.pausedAt}
           {@const _ = setTimeout(() => toast.dismiss(item.id), remaining)}
         {/if}
@@ -281,17 +143,119 @@
 {/if}
 
 <style>
-  @keyframes fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
+  .toast-container {
+    position: fixed;
+    z-index: 9999;
+    display: flex;
+    gap: 0.5rem;
+    pointer-events: none;
   }
 
-  @keyframes slide-in-from-right-4 {
-    from { transform: translateX(1rem); }
-    to { transform: translateX(0); }
+  .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; }
+  .toast-bottom-left { bottom: 1rem; left: 1rem; flex-direction: column-reverse; }
+  .toast-bottom-center { bottom: 1rem; left: 50%; transform: translateX(-50%); flex-direction: column-reverse; }
+  .toast-bottom-right { bottom: 1rem; right: 1rem; flex-direction: column-reverse; }
+
+  .toast-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    width: 100%;
+    max-width: 24rem;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid;
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
+    pointer-events: auto;
+    animation: toast-in 200ms ease-out;
   }
 
-  .animate-in {
-    animation: fade-in 200ms ease-out, slide-in-from-right-4 200ms ease-out;
+  .toast-info {
+    background-color: var(--color-base01);
+    border-color: var(--color-base03);
+    color: var(--color-base05);
+  }
+
+  .toast-success {
+    background-color: color-mix(in srgb, var(--color-base0B) 10%, var(--color-base00));
+    border-color: color-mix(in srgb, var(--color-base0B) 30%, transparent);
+    color: var(--color-base0B);
+  }
+
+  .toast-warning {
+    background-color: color-mix(in srgb, var(--color-base0A) 10%, var(--color-base00));
+    border-color: color-mix(in srgb, var(--color-base0A) 30%, transparent);
+    color: var(--color-base0A);
+  }
+
+  .toast-error {
+    background-color: color-mix(in srgb, var(--color-base08) 10%, var(--color-base00));
+    border-color: color-mix(in srgb, var(--color-base08) 30%, transparent);
+    color: var(--color-base08);
+  }
+
+  .toast-icon {
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .toast-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .toast-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .toast-title {
+    font-weight: 500;
+    font-size: 0.875rem;
+    margin: 0;
+  }
+
+  .toast-message {
+    font-size: 0.875rem;
+    margin: 0;
+  }
+
+  .toast-message.has-title {
+    margin-top: 0.25rem;
+    opacity: 0.9;
+  }
+
+  .toast-close {
+    flex-shrink: 0;
+    padding: 0.25rem;
+    border-radius: 0.375rem;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 150ms;
+  }
+
+  .toast-close:hover {
+    opacity: 1;
+  }
+
+  .toast-close svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  @keyframes toast-in {
+    from {
+      opacity: 0;
+      transform: translateX(1rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
   }
 </style>

package/src/components/forms/Checkbox.svelte

@@ -105,33 +105,33 @@
     justify-content: center;
     width: 18px;
     height: 18px;
-    border: 2px solid var(--color-border);
+    border: 2px solid var(--color-base03);
     border-radius: var(--radius-default);
-    background-color: var(--color-bg);
+    background-color: var(--color-base00);
     transition: var(--transition-all);
   }
 
   .checkbox-input:checked + .checkbox-box {
-    background-color: var(--color-primary);
-    border-color: var(--color-primary);
+    background-color: var(--color-base0D);
+    border-color: var(--color-base0D);
   }
 
   .checkbox-error {
-    border-color: var(--color-error);
+    border-color: var(--color-base08);
   }
 
   .checkbox-input:checked + .checkbox-error {
-    background-color: var(--color-error);
-    border-color: var(--color-error);
+    background-color: var(--color-base08);
+    border-color: var(--color-base08);
   }
 
   .checkbox-input:focus-visible + .checkbox-box {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-base0D);
     outline-offset: 2px;
   }
 
   .checkbox-input:focus-visible + .checkbox-error {
-    outline-color: var(--color-error);
+    outline-color: var(--color-base08);
   }
 
   .checkbox-icon {
@@ -142,6 +142,6 @@
 
   .checkbox-label {
     font-size: var(--text-sm);
-    color: var(--color-text);
+    color: var(--color-base05);
   }
 </style>

package/src/components/forms/Dropzone.svelte

@@ -151,21 +151,21 @@
     justify-content: center;
     min-height: 8rem;
     padding: var(--space-4);
-    border: 2px dashed var(--color-border-muted);
+    border: 2px dashed var(--color-base02);
     border-radius: var(--radius-lg);
-    background: var(--color-surface);
+    background: var(--color-base01);
     cursor: pointer;
     transition: border-color 0.2s ease, background 0.2s ease;
   }
 
   .dropzone:hover:not(.dropzone-disabled) {
-    border-color: var(--color-primary);
-    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
+    border-color: var(--color-base0D);
+    background: color-mix(in srgb, var(--color-base0D) 5%, transparent);
   }
 
   .dropzone-dragging {
-    border-color: var(--color-primary);
-    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    border-color: var(--color-base0D);
+    background: color-mix(in srgb, var(--color-base0D) 10%, transparent);
   }
 
   .dropzone-disabled {
@@ -176,7 +176,7 @@
   .dropzone-message {
     margin: 0;
     font-size: var(--text-sm);
-    color: var(--color-text-muted);
+    color: var(--color-base04);
     text-align: center;
     pointer-events: none;
   }
@@ -200,8 +200,8 @@
     gap: var(--space-3);
     width: 100%;
     padding: var(--space-3);
-    background: var(--color-bg);
-    border: 1px solid var(--color-border-muted);
+    background: var(--color-base00);
+    border: 1px solid var(--color-base02);
     border-radius: var(--radius-md);
   }
 
@@ -214,7 +214,7 @@
     margin: 0;
     font-size: var(--text-sm);
     font-weight: 500;
-    color: var(--color-text-strong);
+    color: var(--color-base07);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -223,7 +223,7 @@
   .dropzone-file-meta {
     margin: var(--space-1) 0 0 0;
     font-size: var(--text-xs);
-    color: var(--color-text-muted);
+    color: var(--color-base04);
   }
 
   .dropzone-clear {
@@ -235,14 +235,14 @@
     background: transparent;
     border: none;
     border-radius: var(--radius-sm);
-    color: var(--color-text-muted);
+    color: var(--color-base04);
     cursor: pointer;
     transition: background 0.15s ease, color 0.15s ease;
     z-index: 1;
   }
 
   .dropzone-clear:hover {
-    background: var(--color-surface-hover);
-    color: var(--color-text);
+    background: var(--color-base02);
+    color: var(--color-base05);
   }
 </style>

package/src/components/forms/FileUpload.svelte

@@ -171,21 +171,21 @@
     gap: var(--space-2);
     width: 100%;
     padding: var(--space-6) var(--space-4);
-    background: var(--color-bg);
-    border: 2px dashed var(--color-border);
+    background: var(--color-base00);
+    border: 2px dashed var(--color-base03);
     border-radius: var(--radius-lg);
     cursor: pointer;
     transition: var(--transition-colors);
   }
 
   .upload-zone:hover:not(:disabled) {
-    border-color: var(--color-primary);
-    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
+    border-color: var(--color-base0D);
+    background: color-mix(in srgb, var(--color-base0D) 5%, transparent);
   }
 
   .upload-zone-dragging {
-    border-color: var(--color-primary);
-    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    border-color: var(--color-base0D);
+    background: color-mix(in srgb, var(--color-base0D) 10%, transparent);
   }
 
   .upload-zone-disabled {
@@ -194,18 +194,18 @@
   }
 
   .upload-icon {
-    color: var(--color-text-muted);
+    color: var(--color-base04);
   }
 
   .upload-label {
     font-size: var(--text-sm);
     font-weight: 500;
-    color: var(--color-text);
+    color: var(--color-base05);
   }
 
   .upload-hint {
     font-size: var(--text-xs);
-    color: var(--color-text-muted);
+    color: var(--color-base04);
   }
 
   .upload-input {
@@ -226,15 +226,15 @@
     align-items: center;
     gap: var(--space-2);
     padding: var(--space-2) var(--space-3);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border-muted);
+    background: var(--color-base01);
+    border: 1px solid var(--color-base02);
     border-radius: var(--radius-md);
   }
 
   .file-name {
     flex: 1;
     font-size: var(--text-sm);
-    color: var(--color-text);
+    color: var(--color-base05);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -242,7 +242,7 @@
 
   .file-size {
     font-size: var(--text-xs);
-    color: var(--color-text-muted);
+    color: var(--color-base04);
     white-space: nowrap;
   }
 
@@ -254,13 +254,13 @@
     background: transparent;
     border: none;
     border-radius: var(--radius-sm);
-    color: var(--color-text-muted);
+    color: var(--color-base04);
     cursor: pointer;
     transition: var(--transition-colors);
   }
 
   .file-remove:hover {
-    color: var(--color-error);
-    background: color-mix(in srgb, var(--color-error) 10%, transparent);
+    color: var(--color-base08);
+    background: color-mix(in srgb, var(--color-base08) 10%, transparent);
   }
 </style>

package/src/components/forms/IconInput.svelte

@@ -124,7 +124,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--color-text-muted);
+    color: var(--color-base04);
     pointer-events: none;
   }
 
@@ -172,13 +172,13 @@
     background: transparent;
     border: none;
     border-radius: var(--radius-sm);
-    color: var(--color-text-muted);
+    color: var(--color-base04);
     cursor: pointer;
     transition: var(--transition-colors);
   }
 
   .icon-clear:hover {
-    color: var(--color-text);
-    background: var(--color-surface-hover);
+    color: var(--color-base05);
+    background: var(--color-base02);
   }
 </style>