@miozu/jera 0.0.2 → 0.3.0

package/package.json

@@ -1,24 +1,54 @@
 {
   "name": "@miozu/jera",
-  "version": "0.0.2",
-  "description": "Svelte 5 component library",
-  "main": "jera.js",
-  "bin": {
-    "jera": "./jera.js"
-  },
+  "version": "0.3.0",
+  "description": "Minimal, reactive component library for Svelte 5",
   "type": "module",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "prepublishOnly": "echo 'Publishing @miozu/jera...' && test -f src/index.js"
+  },
+  "svelte": "./src/index.js",
+  "exports": {
+    ".": {
+      "svelte": "./src/index.js",
+      "default": "./src/index.js"
+    },
+    "./tokens": "./src/tokens/index.css",
+    "./tokens/colors": "./src/tokens/colors.css",
+    "./tokens/spacing": "./src/tokens/spacing.css",
+    "./tokens/typography": "./src/tokens/typography.css",
+    "./tokens/effects": "./src/tokens/effects.css",
+    "./utils": "./src/utils/index.js",
+    "./actions": "./src/actions/index.js"
+  },
+  "files": [
+    "src",
+    "llms.txt",
+    "CLAUDE.md"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0"
   },
+  "devDependencies": {
+    "svelte": "^5.41.0"
+  },
+  "keywords": [
+    "svelte",
+    "svelte5",
+    "components",
+    "design-system",
+    "ui",
+    "miozu",
+    "base16",
+    "dark-theme"
+  ],
+  "author": "Nicholas Glazer <glazer.nicholas@gmail.com>",
+  "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://codeberg.org/miozu/jera"
+    "url": "https://github.com/miozu-com/jera"
   },
-  "keywords": ["component library", "svelte 5", "sveltekit"],
-  "author": "Nicholas Glazer <info@nicgl.com>",
-  "license": "MIT",
-  "packageManager": "pnpm@10.6.5",
-  "dependencies": {
-    "commander": "^13.1.0"
+  "homepage": "https://miozu.com",
+  "bugs": {
+    "url": "https://github.com/miozu-com/jera/issues"
   }
 }

package/src/actions/index.js

@@ -0,0 +1,375 @@
+/**
+ * Svelte Actions Library
+ *
+ * Reusable element behaviors that can be composed onto any element.
+ * Actions are the Svelte way to add imperative logic to elements.
+ *
+ * @example
+ * <div use:clickOutside={handleClose}>...</div>
+ * <input use:focus />
+ * <button use:longPress={{ duration: 500, onLongPress: handler }}>...</button>
+ */
+
+/**
+ * Click Outside Action
+ *
+ * Fires callback when clicking outside the element.
+ * Useful for dropdowns, modals, popovers.
+ *
+ * @param {HTMLElement} node
+ * @param {() => void} callback
+ * @returns {{ destroy: () => void, update: (cb: () => void) => void }}
+ *
+ * @example
+ * <div use:clickOutside={() => isOpen = false}>Dropdown</div>
+ */
+export function clickOutside(node, callback) {
+  let handler = callback;
+
+  function handleClick(event) {
+    if (!node.contains(event.target) && !event.defaultPrevented) {
+      handler?.();
+    }
+  }
+
+  // Use mousedown for better UX (fires before focus changes)
+  document.addEventListener('mousedown', handleClick, true);
+
+  return {
+    update(newCallback) {
+      handler = newCallback;
+    },
+    destroy() {
+      document.removeEventListener('mousedown', handleClick, true);
+    }
+  };
+}
+
+/**
+ * Focus Trap Action
+ *
+ * Traps focus within an element. Essential for accessible modals.
+ *
+ * @param {HTMLElement} node
+ * @param {{ enabled?: boolean, initialFocus?: string }} [options]
+ * @returns {{ destroy: () => void, update: (opts: { enabled?: boolean }) => void }}
+ *
+ * @example
+ * <dialog use:focusTrap={{ enabled: isOpen }}>...</dialog>
+ */
+export function focusTrap(node, options = {}) {
+  let { enabled = true, initialFocus } = options;
+
+  const focusableSelectors = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])'
+  ].join(',');
+
+  function getFocusable() {
+    return Array.from(node.querySelectorAll(focusableSelectors));
+  }
+
+  function handleKeydown(event) {
+    if (!enabled || event.key !== 'Tab') return;
+
+    const focusable = getFocusable();
+    if (focusable.length === 0) return;
+
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+
+  function setInitialFocus() {
+    if (!enabled) return;
+
+    const target = initialFocus
+      ? node.querySelector(initialFocus)
+      : getFocusable()[0];
+
+    target?.focus();
+  }
+
+  node.addEventListener('keydown', handleKeydown);
+  // Delay initial focus to allow transitions
+  requestAnimationFrame(setInitialFocus);
+
+  return {
+    update(newOptions) {
+      enabled = newOptions.enabled ?? true;
+      initialFocus = newOptions.initialFocus;
+      if (enabled) setInitialFocus();
+    },
+    destroy() {
+      node.removeEventListener('keydown', handleKeydown);
+    }
+  };
+}
+
+/**
+ * Auto-focus Action
+ *
+ * Focuses element on mount.
+ *
+ * @param {HTMLElement} node
+ * @param {{ delay?: number, select?: boolean }} [options]
+ *
+ * @example
+ * <input use:autoFocus />
+ * <input use:autoFocus={{ delay: 100, select: true }} />
+ */
+export function autoFocus(node, options = {}) {
+  const { delay = 0, select = false } = options;
+
+  const timeout = setTimeout(() => {
+    node.focus();
+    if (select && 'select' in node) {
+      node.select();
+    }
+  }, delay);
+
+  return {
+    destroy() {
+      clearTimeout(timeout);
+    }
+  };
+}
+
+/**
+ * Long Press Action
+ *
+ * Detects long press/hold gesture.
+ *
+ * @param {HTMLElement} node
+ * @param {{ duration?: number, onLongPress: () => void }} options
+ *
+ * @example
+ * <button use:longPress={{ duration: 500, onLongPress: handleLongPress }}>
+ *   Hold me
+ * </button>
+ */
+export function longPress(node, options) {
+  let { duration = 500, onLongPress } = options;
+  let timeout = null;
+
+  function handleStart() {
+    timeout = setTimeout(() => {
+      onLongPress?.();
+    }, duration);
+  }
+
+  function handleEnd() {
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  }
+
+  node.addEventListener('mousedown', handleStart);
+  node.addEventListener('touchstart', handleStart, { passive: true });
+  node.addEventListener('mouseup', handleEnd);
+  node.addEventListener('mouseleave', handleEnd);
+  node.addEventListener('touchend', handleEnd);
+  node.addEventListener('touchcancel', handleEnd);
+
+  return {
+    update(newOptions) {
+      duration = newOptions.duration ?? 500;
+      onLongPress = newOptions.onLongPress;
+    },
+    destroy() {
+      handleEnd();
+      node.removeEventListener('mousedown', handleStart);
+      node.removeEventListener('touchstart', handleStart);
+      node.removeEventListener('mouseup', handleEnd);
+      node.removeEventListener('mouseleave', handleEnd);
+      node.removeEventListener('touchend', handleEnd);
+      node.removeEventListener('touchcancel', handleEnd);
+    }
+  };
+}
+
+/**
+ * Escape Key Action
+ *
+ * Fires callback when Escape is pressed while element or children have focus.
+ *
+ * @param {HTMLElement} node
+ * @param {() => void} callback
+ *
+ * @example
+ * <dialog use:escapeKey={handleClose}>...</dialog>
+ */
+export function escapeKey(node, callback) {
+  let handler = callback;
+
+  function handleKeydown(event) {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      handler?.();
+    }
+  }
+
+  // Listen on document for global escape handling
+  document.addEventListener('keydown', handleKeydown);
+
+  return {
+    update(newCallback) {
+      handler = newCallback;
+    },
+    destroy() {
+      document.removeEventListener('keydown', handleKeydown);
+    }
+  };
+}
+
+/**
+ * Portal Action
+ *
+ * Moves element to a different location in the DOM.
+ * Useful for modals, toasts, tooltips.
+ *
+ * @param {HTMLElement} node
+ * @param {string | HTMLElement} [target] - CSS selector or element (default: document.body)
+ *
+ * @example
+ * <div use:portal>Portaled to body</div>
+ * <div use:portal="#modal-root">Portaled to #modal-root</div>
+ */
+export function portal(node, target = 'body') {
+  let targetEl;
+
+  function update(newTarget) {
+    targetEl = typeof newTarget === 'string'
+      ? document.querySelector(newTarget)
+      : newTarget;
+
+    if (targetEl) {
+      targetEl.appendChild(node);
+    }
+  }
+
+  update(target);
+
+  return {
+    update,
+    destroy() {
+      node.remove();
+    }
+  };
+}
+
+/**
+ * Intersection Observer Action
+ *
+ * Observes element visibility in viewport.
+ *
+ * @param {HTMLElement} node
+ * @param {{ onIntersect: (entry: IntersectionObserverEntry) => void, options?: IntersectionObserverInit }} config
+ *
+ * @example
+ * <div use:intersect={{ onIntersect: (e) => isVisible = e.isIntersecting }}>
+ *   Lazy loaded content
+ * </div>
+ */
+export function intersect(node, config) {
+  let { onIntersect, options = {} } = config;
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => onIntersect?.(entry));
+  }, options);
+
+  observer.observe(node);
+
+  return {
+    update(newConfig) {
+      onIntersect = newConfig.onIntersect;
+    },
+    destroy() {
+      observer.disconnect();
+    }
+  };
+}
+
+/**
+ * Resize Observer Action
+ *
+ * Observes element size changes.
+ *
+ * @param {HTMLElement} node
+ * @param {(entry: ResizeObserverEntry) => void} callback
+ *
+ * @example
+ * <div use:resize={(entry) => width = entry.contentRect.width}>
+ *   Responsive content
+ * </div>
+ */
+export function resize(node, callback) {
+  let handler = callback;
+
+  const observer = new ResizeObserver((entries) => {
+    entries.forEach(entry => handler?.(entry));
+  });
+
+  observer.observe(node);
+
+  return {
+    update(newCallback) {
+      handler = newCallback;
+    },
+    destroy() {
+      observer.disconnect();
+    }
+  };
+}
+
+/**
+ * Copy to Clipboard Action
+ *
+ * Copies element's text content or provided value on click.
+ *
+ * @param {HTMLElement} node
+ * @param {{ value?: string, onCopy?: () => void, onError?: (err: Error) => void }} [options]
+ *
+ * @example
+ * <button use:copy={{ value: 'Text to copy', onCopy: () => showToast('Copied!') }}>
+ *   Copy
+ * </button>
+ */
+export function copy(node, options = {}) {
+  let { value, onCopy, onError } = options;
+
+  async function handleClick() {
+    try {
+      const text = value ?? node.textContent ?? '';
+      await navigator.clipboard.writeText(text);
+      onCopy?.();
+    } catch (err) {
+      onError?.(err);
+    }
+  }
+
+  node.addEventListener('click', handleClick);
+
+  return {
+    update(newOptions) {
+      value = newOptions.value;
+      onCopy = newOptions.onCopy;
+      onError = newOptions.onError;
+    },
+    destroy() {
+      node.removeEventListener('click', handleClick);
+    }
+  };
+}

package/src/components/feedback/EmptyState.svelte

@@ -0,0 +1,179 @@
+<!--
+  @component EmptyState
+
+  A complete empty state UI with icon, title, description, and action buttons.
+
+  @example Basic
+  <EmptyState
+    title="No items found"
+    description="Try adjusting your search or filters"
+  />
+
+  @example With icon and action
+  <EmptyState
+    title="No messages"
+    description="Start a conversation to see messages here"
+  >
+    {#snippet icon()}
+      <MessageIcon size={32} />
+    {/snippet}
+    {#snippet actions()}
+      <Button variant="primary" onclick={startChat}>New Message</Button>
+    {/snippet}
+  </EmptyState>
+
+  @example Compact size
+  <EmptyState size="compact" title="No results" />
+-->
+<script>
+  let {
+    title = 'No data found',
+    description = '',
+    size = 'default',
+    class: className = '',
+    icon,
+    actions
+  } = $props();
+</script>
+
+<div class="empty-state empty-state-{size} {className}">
+  <div class="empty-state-content">
+    {#if icon}
+      <div class="empty-state-icon">
+        {@render icon()}
+      </div>
+    {/if}
+
+    <div class="empty-state-text">
+      <h3 class="empty-state-title">{title}</h3>
+      {#if description}
+        <p class="empty-state-description">{description}</p>
+      {/if}
+    </div>
+
+    {#if actions}
+      <div class="empty-state-actions">
+        {@render actions()}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .empty-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: var(--space-16) var(--space-6);
+  }
+
+  .empty-state-compact {
+    padding: var(--space-8) var(--space-4);
+  }
+
+  .empty-state-large {
+    padding: var(--space-24) var(--space-6);
+  }
+
+  .empty-state-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    max-width: 24rem;
+  }
+
+  .empty-state-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 4rem;
+    height: 4rem;
+    margin-bottom: var(--space-6);
+    border-radius: 9999px;
+    background: var(--color-surface);
+    color: var(--color-text-muted);
+    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
+  }
+
+  .empty-state-compact .empty-state-icon {
+    width: 3rem;
+    height: 3rem;
+    margin-bottom: var(--space-4);
+  }
+
+  .empty-state-large .empty-state-icon {
+    width: 5rem;
+    height: 5rem;
+    margin-bottom: var(--space-8);
+  }
+
+  .empty-state:hover .empty-state-icon {
+    background: var(--color-surface-hover);
+    color: var(--color-text);
+    transform: scale(1.05);
+  }
+
+  .empty-state-text {
+    margin-bottom: var(--space-6);
+  }
+
+  .empty-state-compact .empty-state-text {
+    margin-bottom: var(--space-4);
+  }
+
+  .empty-state-large .empty-state-text {
+    margin-bottom: var(--space-8);
+  }
+
+  .empty-state-title {
+    margin: 0 0 var(--space-2) 0;
+    font-size: var(--text-lg);
+    font-weight: 600;
+    color: var(--color-text-strong);
+    line-height: 1.3;
+  }
+
+  .empty-state-compact .empty-state-title {
+    font-size: var(--text-base);
+    font-weight: 500;
+  }
+
+  .empty-state-large .empty-state-title {
+    font-size: var(--text-xl);
+  }
+
+  .empty-state-description {
+    margin: 0;
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+    line-height: 1.5;
+    max-width: 20rem;
+  }
+
+  .empty-state-compact .empty-state-description {
+    font-size: var(--text-xs);
+  }
+
+  .empty-state-large .empty-state-description {
+    font-size: var(--text-base);
+    max-width: 24rem;
+  }
+
+  .empty-state-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .empty-state-compact .empty-state-actions {
+    gap: var(--space-2);
+  }
+
+  .empty-state-large .empty-state-actions {
+    gap: var(--space-4);
+  }
+</style>