@motion-proto/live-tokens 0.1.0

package/src/components/Dialog.svelte

@@ -0,0 +1,269 @@
+<script lang="ts">
+  import { createEventDispatcher, tick } from 'svelte';
+
+  export let show: boolean = false;
+  export let title: string = '';
+  export let confirmLabel: string = 'Confirm';
+  export let cancelLabel: string = 'Cancel';
+  export let showConfirm: boolean = true;
+  export let showCancel: boolean = true;
+  export let confirmDisabled: boolean = false;
+  export let width: string = '500px';
+
+  // Optional callbacks for parent dialogs to control behavior
+  export let onConfirm: (() => void) | undefined = undefined;
+  export let onCancel: (() => void) | undefined = undefined;
+
+  const dispatch = createEventDispatcher<{
+    confirm: void;
+    cancel: void;
+    close: void;
+  }>();
+
+  // Reference to the primary (confirm) button for focus management
+  let confirmButtonRef: HTMLButtonElement;
+  let cancelButtonRef: HTMLButtonElement;
+  let closeButtonRef: HTMLButtonElement;
+
+  // Focus the primary button when dialog opens
+  $: if (show) {
+    tick().then(() => {
+      // Focus the primary (confirm) button first, then fall back to cancel, then close
+      if (showConfirm && confirmButtonRef && !confirmDisabled) {
+        confirmButtonRef.focus();
+      } else if (showCancel && cancelButtonRef) {
+        cancelButtonRef.focus();
+      } else if (closeButtonRef) {
+        closeButtonRef.focus();
+      }
+    });
+  }
+
+  function handleConfirm() {
+    if (!confirmDisabled) {
+      if (onConfirm) {
+        // Parent dialog controls the flow
+        onConfirm();
+      } else {
+        // Default behavior for backward compatibility
+        dispatch('confirm');
+      }
+    }
+  }
+
+  function handleCancel() {
+    if (onCancel) {
+      // Parent dialog controls the flow
+      onCancel();
+    } else {
+      // Default behavior for backward compatibility
+      dispatch('cancel');
+      dispatch('close');
+      show = false;
+    }
+  }
+
+  // No implicit keyboard or backdrop close handlers
+  // Dialog only closes via explicit button clicks (X, Cancel, or Confirm)
+</script>
+
+{#if show}
+  <div class="dialog-backdrop">
+    <div class="dialog" style="width: {width}; max-width: {width};">
+      <div class="dialog-content">
+        {#if title}
+          <div class="dialog-header">
+            <h3 class="dialog-title">{title}</h3>
+            <button
+              bind:this={closeButtonRef}
+              class="dialog-close"
+              on:click={handleCancel}
+              aria-label="Close"
+              tabindex="0"
+            >
+              <i class="fas fa-times"></i>
+            </button>
+          </div>
+        {/if}
+
+        <div class="dialog-body">
+          <slot />
+        </div>
+
+        {#if showConfirm || showCancel}
+          <div class="dialog-footer">
+            <div class="dialog-footer-left">
+              <slot name="footer-left" />
+            </div>
+            <div class="dialog-footer-buttons">
+              {#if showCancel}
+                <button
+                  bind:this={cancelButtonRef}
+                  class="dialog-button dialog-button-secondary"
+                  on:click={handleCancel}
+                  tabindex="0"
+                >
+                  {cancelLabel}
+                </button>
+              {/if}
+              {#if showConfirm}
+                <button
+                  bind:this={confirmButtonRef}
+                  class="dialog-button dialog-button-primary"
+                  on:click={handleConfirm}
+                  disabled={confirmDisabled}
+                  tabindex="0"
+                >
+                  {confirmLabel}
+                </button>
+              {/if}
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .dialog-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--overlay-high);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: var(--z-overlay);
+    pointer-events: auto;
+  }
+
+  .dialog {
+    background: var(--surface-neutral-lowest);
+    border: 2px solid var(--border-neutral-strong);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-overlay);
+    animation: dialogSlideIn var(--transition-base);
+    pointer-events: auto;
+  }
+
+  @keyframes dialogSlideIn {
+    from {
+      opacity: 0;
+      transform: translateY(-1.25rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .dialog-content {
+    padding: 0;
+  }
+
+  .dialog-header {
+    padding: .5rem var(--space-24);
+    border-bottom: 1px solid var(--border-neutral-subtle);
+    background: var(--empty);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .dialog-title {
+    margin: 0;
+    font-size: var(--font-2xl);
+    font-weight: var(--font-weight-semibold);
+    color: var(--text-primary);
+  }
+
+  .dialog-close {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    font-size: var(--font-xl);
+    cursor: pointer;
+    margin-right: -var(--space-16);
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md);
+    transition: all var(--transition-base);
+  }
+
+  .dialog-close:hover {
+    background: var(--hover);
+    color: var(--text-primary);
+  }
+
+  .dialog-body {
+    padding: var(--space-16) var(--space-24);
+  }
+
+  .dialog-footer {
+    padding: var(--space-16);
+    border-top: 1px solid var(--border-neutral-subtle);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-16);
+  }
+
+  .dialog-footer-left {
+    display: flex;
+    align-items: center;
+  }
+
+  .dialog-footer-buttons {
+    display: flex;
+    gap: var(--space-8);
+  }
+
+  .dialog-button {
+    padding: var(--space-8) var(--space-16);
+    border: 1px solid var(--border-neutral-subtle);
+    border-radius: var(--radius-md);
+    font-size: var(--font-md);
+    font-weight: var(--font-weight-medium);
+    cursor: pointer;
+    transition: all var(--transition-base);
+    min-width: 5rem;
+  }
+
+  .dialog-button:disabled {
+    opacity: var(--opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .dialog-button-primary {
+    background: var(--btn-secondary-bg);
+    color: var(--text-primary);
+    border-color: var(--border-neutral-medium);
+  }
+
+  .dialog-button-primary:hover:not(:disabled) {
+    background: var(--btn-secondary-hover);
+    border-color: var(--border-neutral-strong);
+  }
+
+  .dialog-button-primary:focus {
+    outline: 2px solid var(--border-neutral-strong);
+    outline-offset: 0.125rem;
+  }
+
+  .dialog-button-secondary {
+    background: transparent;
+    color: var(--text-primary);
+    border-color: var(--border-neutral-medium);
+  }
+
+  .dialog-button-secondary:hover:not(:disabled) {
+    background: var(--hover-low);
+    border-color: var(--border-neutral-strong);
+  }
+</style>

package/src/components/InlineEditActions.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+   /**
+    * Reusable inline edit action buttons (confirm/cancel)
+    * Used for inline editing throughout the app
+    */
+
+   export let onSave: () => void | Promise<void>;
+   export let onCancel: () => void;
+   export let disabled = false;
+   export let saveTitle = "Save";
+   export let cancelTitle = "Cancel";
+</script>
+
+<div class="inline-actions">
+   <button
+      class="save-btn"
+      on:click={onSave}
+      {disabled}
+      title={saveTitle}
+   >
+      <i class="fas fa-check"></i>
+   </button>
+   <button
+      class="cancel-btn"
+      on:click={onCancel}
+      disabled={disabled}
+      title={cancelTitle}
+   >
+      <i class="fas fa-times"></i>
+   </button>
+</div>
+
+<style lang="scss">
+   .inline-actions {
+      display: flex;
+      gap: var(--space-8);
+   }
+
+   .save-btn,
+   .cancel-btn {
+      padding: var(--space-4) var(--space-8);
+      border: none;
+      border-radius: var(--radius-md);
+      cursor: pointer;
+      transition: all 0.2s;
+      display: flex;
+      align-items: center;
+      gap: var(--space-8);
+
+      &:disabled {
+         opacity: 0.5;
+         cursor: not-allowed;
+      }
+   }
+
+   .save-btn {
+      background: rgba(144, 238, 144, 0.2);
+      color: #90ee90;
+
+      &:hover:not(:disabled) {
+         background: rgba(144, 238, 144, 0.3);
+      }
+   }
+
+   .cancel-btn {
+      background: rgba(255, 107, 107, 0.2);
+      color: #ff6b6b;
+
+      &:hover:not(:disabled) {
+         background: rgba(255, 107, 107, 0.3);
+      }
+   }
+</style>

package/src/components/Notification.svelte

@@ -0,0 +1,308 @@
+<script lang="ts">
+   import { createEventDispatcher } from 'svelte';
+   import Button from './Button.svelte';
+
+   export let title: string;
+   export let description: string;
+   export let impact: string = '';
+   export let variant: 'info' | 'warning' | 'danger' | 'success' = 'info';
+   export let size: 'normal' | 'compact' = 'normal';
+   export let icon: string = '';
+   export let dismissible: boolean = false;
+   export let emphasis: boolean = false;
+
+   // Action button props
+   export let actionText: string = '';
+   export let actionIcon: string = '';
+   export let onAction: (() => void) | undefined = undefined;
+   export let actionInline: boolean = false;
+   export let actionHeader: boolean = false; // NEW: Show action button in header row
+
+   const dispatch = createEventDispatcher();
+
+   // Default icons based on variant
+   const defaultIcons = {
+      info: 'fas fa-info-circle',
+      warning: 'fas fa-exclamation-triangle',
+      danger: 'fas fa-times-circle',
+      success: 'fas fa-check-circle'
+   };
+
+   $: displayIcon = icon || defaultIcons[variant];
+
+   function handleDismiss() {
+      dispatch('dismiss');
+   }
+</script>
+
+<div class="notification" class:info={variant === 'info'} class:warning={variant === 'warning'} class:danger={variant === 'danger'} class:success={variant === 'success'} class:emphasis={emphasis} class:compact={size === 'compact'}>
+   <div class="notification-header" class:has-action={actionHeader && onAction}>
+      <i class={displayIcon}></i>
+      <span class="notification-title">{title}</span>
+      {#if actionHeader && onAction}
+         <div class="action-button-backdrop">
+            <Button variant="outline" icon={actionIcon} on:click={onAction}>
+               {actionText}
+            </Button>
+         </div>
+      {/if}
+      {#if dismissible}
+         <button class="notification-close" on:click={handleDismiss} type="button" aria-label="Dismiss">
+            <i class="fas fa-times"></i>
+         </button>
+      {/if}
+   </div>
+   {#if description && !actionInline}
+      <div class="notification-description">{description}</div>
+   {/if}
+   {#if impact}
+      <div class="notification-impact">{impact}</div>
+   {/if}
+   <slot />
+   {#if onAction && !actionHeader}
+      {#if actionInline}
+         <div class="notification-actions-inline">
+            {#if description}
+               <span class="description-text">{description}</span>
+            {/if}
+            <Button variant="outline" icon={actionIcon} on:click={onAction}>
+               {actionText}
+            </Button>
+         </div>
+      {:else}
+         <div class="notification-actions">
+            <Button variant="outline" icon={actionIcon} on:click={onAction}>
+               {actionText}
+            </Button>
+         </div>
+      {/if}
+   {/if}
+</div>
+
+<style lang="scss">
+   .notification {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      width: 100%;
+      gap: 0;
+      border-radius: var(--radius-md);
+      font-size: var(--font-md);
+      border: 1px solid;
+      transition: all var(--transition-fast);
+      position: relative;
+      text-align: left;
+      overflow: hidden;
+
+      &.emphasis {
+         border-left-width: 0.375rem;
+      }
+
+      &.compact {
+         font-size: var(--font-sm);
+
+         .notification-header {
+            padding: var(--space-6) var(--space-12);
+
+            i {
+               font-size: var(--font-sm);
+            }
+
+            .notification-title {
+               font-size: var(--font-md);
+            }
+         }
+
+         .notification-description {
+            font-size: var(--font-sm);
+            padding: var(--space-8) var(--space-12);
+         }
+
+         .notification-impact {
+            font-size: var(--font-sm);
+            padding: var(--space-8) var(--space-12);
+         }
+
+         .notification-actions-inline {
+            padding: var(--space-8) var(--space-12);
+
+            .description-text {
+               font-size: var(--font-sm);
+            }
+         }
+
+         .notification-actions {
+            padding: var(--space-8) var(--space-12);
+         }
+      }
+
+      // Info variant (blue)
+      &.info {
+         border-color: var(--border-info-darker);
+         color: var(--text-primary);
+
+         .notification-header {
+            background: var(--surface-info-low);
+
+            i {
+               color: var(--text-info);
+            }
+         }
+      }
+
+      // Warning variant (orange)
+      &.warning {
+         border-color: var(--border-warning);
+         color: var(--text-primary);
+
+         .notification-header {
+            background: var(--surface-warning);
+
+            i {
+               color: var(--text-warning);
+            }
+         }
+      }
+
+      // Danger variant (red)
+      &.danger {
+         border-color: var(--border-danger);
+         color: var(--text-primary);
+
+         .notification-header {
+            background: var(--surface-primary);
+
+            i {
+               color: var(--text-danger);
+            }
+         }
+      }
+
+      // Success variant (green)
+      &.success {
+         border-color: var(--border-success);
+         color: var(--text-primary);
+
+         .notification-header {
+            background: var(--surface-success);
+
+            i {
+               color: var(--text-success);
+            }
+         }
+      }
+   }
+
+   .notification-header {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: var(--space-8);
+      width: 100%;
+      padding: .5rem var(--space-16);
+      position: relative;
+
+      // When action button is in header, add spacing
+      &.has-action {
+         gap: var(--space-12);
+      }
+
+      i {
+         font-size: var(--font-md);
+         flex-shrink: 0;
+      }
+
+      .notification-title {
+         font-weight: var(--font-weight-semibold);
+         font-size: var(--font-lg);
+         text-align: left;
+         flex: 1;
+      }
+
+      .action-button-backdrop {
+         flex-shrink: 0;
+         background: var(--surface-neutral-lowest);
+         border-radius: var(--radius-md);
+      }
+
+      .notification-close {
+         position: absolute;
+         top: 50%;
+         right: 0.5rem;
+         transform: translateY(-50%);
+         background: none;
+         border: none;
+         cursor: pointer;
+         padding: var(--space-4);
+         display: flex;
+         align-items: center;
+         justify-content: center;
+         opacity: 0.7;
+         transition: opacity var(--transition-fast);
+
+         i {
+            font-size: var(--font-sm);
+            color: inherit;
+         }
+
+         &:hover {
+            opacity: 1;
+         }
+
+         &:focus {
+            outline: 2px solid currentColor;
+            outline-offset: 0.125rem;
+            border-radius: var(--radius-sm);
+         }
+      }
+   }
+
+   .notification-description {
+      line-height: 1.4;
+      font-size: var(--font-md);
+      font-weight: var(--font-weight-light);
+      text-align: left;
+      padding: .75rem var(--space-16);
+   }
+
+   .notification-impact {
+      font-weight: var(--font-weight-bold);
+      padding: var(--space-8) var(--space-16);
+      padding-bottom: var(--space-12);
+      margin-top: 0;
+      border-top: 1px solid var(--border-neutral-subtle);
+      font-size: var(--font-md);
+      text-align: left;
+      width: 100%;
+   }
+
+   // Action buttons - inline variant
+   .notification-actions-inline {
+      display: flex;
+      align-items: center;
+      gap: var(--space-16);
+      padding: var(--space-12) var(--space-16);
+
+      .description-text {
+         flex: 1;
+         line-height: 1.4;
+         font-size: var(--font-md);
+         font-weight: var(--font-weight-light);
+      }
+
+      // Button stays on the right (doesn't shrink or grow)
+      :global(button) {
+         flex-shrink: 0;
+         margin-left: auto;
+      }
+   }
+
+   // Action buttons - standard (below description)
+   .notification-actions {
+      display: flex;
+      gap: var(--space-8);
+      padding: var(--space-12) var(--space-16);
+      padding-top: var(--space-8);
+      border-top: 1px solid var(--border-neutral-subtle);
+   }
+</style>