@miozu/jera 0.0.2 → 0.3.0

package/src/utils/index.js

@@ -0,0 +1,17 @@
+/**
+ * Jera Utilities
+ *
+ * Core utilities for class composition and reactive state management.
+ */
+
+export { cn, rcn, cv, mergeClasses, when, match } from './cn.svelte.js';
+export {
+  createReactive,
+  createDerived,
+  ThemeState,
+  createThemeContext,
+  getThemeContext,
+  createComponentState,
+  createIdGenerator,
+  generateId
+} from './reactive.svelte.js';

package/src/utils/reactive.svelte.js

@@ -0,0 +1,239 @@
+/**
+ * Reactive State Utilities for Svelte 5
+ *
+ * Advanced patterns for creating shareable, reactive state.
+ * Uses Svelte 5 runes ($state, $derived, $effect) internally.
+ */
+
+import { getContext, setContext, onMount } from 'svelte';
+
+/**
+ * Create a reactive store-like object with Svelte 5 runes
+ * Unlike stores, these work seamlessly with runes and don't need $ prefix
+ *
+ * @template T
+ * @param {T} initial
+ * @returns {{ value: T, set: (v: T) => void, update: (fn: (v: T) => T) => void }}
+ *
+ * @example
+ * const count = createReactive(0);
+ * count.value; // read
+ * count.set(5); // write
+ * count.update(n => n + 1); // update
+ */
+export function createReactive(initial) {
+  let value = $state(initial);
+
+  return {
+    get value() {
+      return value;
+    },
+    set value(v) {
+      value = v;
+    },
+    set(v) {
+      value = v;
+    },
+    update(fn) {
+      value = fn(value);
+    }
+  };
+}
+
+/**
+ * Create a derived reactive value
+ *
+ * @template T
+ * @param {() => T} fn
+ * @returns {{ readonly value: T }}
+ */
+export function createDerived(fn) {
+  const value = $derived.by(fn);
+
+  return {
+    get value() {
+      return value;
+    }
+  };
+}
+
+/**
+ * Theme Context Key
+ */
+const THEME_KEY = Symbol('jera-theme');
+
+/**
+ * Theme Reactive State Class
+ *
+ * Manages theme state with persistence and SSR support.
+ * Uses class-based reactive state pattern.
+ */
+export class ThemeState {
+  /** @type {'light' | 'dark' | 'system'} */
+  current = $state('system');
+
+  /** @type {'light' | 'dark'} */
+  resolved = $derived.by(() => this.#resolveTheme());
+
+  /** @type {boolean} */
+  #mounted = false;
+
+  /** @type {MediaQueryList | null} */
+  #mediaQuery = null;
+
+  /** @type {(() => void) | null} */
+  #mediaQueryHandler = null;
+
+  constructor(initial = 'system') {
+    this.current = initial;
+  }
+
+  #resolveTheme() {
+    if (this.current === 'system') {
+      // SSR-safe: default to light if no window
+      if (typeof window === 'undefined') return 'light';
+      return this.#mediaQuery?.matches ? 'dark' : 'light';
+    }
+    return this.current;
+  }
+
+  /**
+   * Initialize theme - call in onMount
+   */
+  init() {
+    if (typeof window === 'undefined') return;
+
+    // Load from storage
+    const stored = localStorage.getItem('jera-theme');
+    if (stored && ['light', 'dark', 'system'].includes(stored)) {
+      this.current = stored;
+    }
+
+    // Setup media query listener
+    this.#mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    this.#mediaQueryHandler = () => {
+      // Trigger re-resolution by reassigning
+      this.current = this.current;
+    };
+    this.#mediaQuery.addEventListener('change', this.#mediaQueryHandler);
+
+    this.#mounted = true;
+    this.#apply();
+  }
+
+  /**
+   * Cleanup - call in onDestroy to prevent memory leaks
+   */
+  cleanup() {
+    if (this.#mediaQuery && this.#mediaQueryHandler) {
+      this.#mediaQuery.removeEventListener('change', this.#mediaQueryHandler);
+      this.#mediaQueryHandler = null;
+    }
+    this.#mounted = false;
+  }
+
+  /**
+   * Set theme and persist
+   * @param {'light' | 'dark' | 'system'} theme
+   */
+  set(theme) {
+    this.current = theme;
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('jera-theme', theme);
+      document.cookie = `jera-theme=${theme};path=/;max-age=31536000`;
+    }
+    this.#apply();
+  }
+
+  /**
+   * Toggle between light and dark
+   */
+  toggle() {
+    this.set(this.resolved === 'light' ? 'dark' : 'light');
+  }
+
+  /**
+   * Apply theme to document
+   */
+  #apply() {
+    if (typeof document === 'undefined') return;
+    document.documentElement.setAttribute('data-theme', this.resolved);
+  }
+}
+
+/**
+ * Create and provide theme context
+ * @param {'light' | 'dark' | 'system'} [initial]
+ * @returns {ThemeState}
+ */
+export function createThemeContext(initial = 'system') {
+  const theme = new ThemeState(initial);
+  setContext(THEME_KEY, theme);
+  return theme;
+}
+
+/**
+ * Get theme from context
+ * @returns {ThemeState}
+ */
+export function getThemeContext() {
+  return getContext(THEME_KEY);
+}
+
+/**
+ * Component State Factory
+ *
+ * Creates encapsulated component state with derived values.
+ * Pattern for complex components like Select, Combobox, etc.
+ *
+ * @template T
+ * @param {T} initialState
+ * @param {(state: T) => Record<string, any>} [derivedFn]
+ */
+export function createComponentState(initialState, derivedFn) {
+  const state = $state(initialState);
+
+  // $derived.by tracks dependencies inside the function
+  const deriveFn = derivedFn || (() => ({}));
+  const derived = $derived.by(() => deriveFn(state));
+
+  return {
+    get state() {
+      return state;
+    },
+    set state(v) {
+      Object.assign(state, v);
+    },
+    get derived() {
+      return derived;
+    },
+    /**
+     * Patch state partially
+     * @param {Partial<T>} patch
+     */
+    patch(patch) {
+      Object.assign(state, patch);
+    },
+    /**
+     * Reset to initial state
+     */
+    reset() {
+      Object.assign(state, initialState);
+    }
+  };
+}
+
+/**
+ * Create a unique ID generator for accessibility
+ * @param {string} [prefix]
+ * @returns {() => string}
+ */
+export function createIdGenerator(prefix = 'jera') {
+  let counter = 0;
+  return () => `${prefix}-${++counter}-${Math.random().toString(36).slice(2, 7)}`;
+}
+
+/**
+ * Shared ID generator instance
+ */
+export const generateId = createIdGenerator();

package/jera.js

@@ -1,135 +0,0 @@
-#!/usr/bin/env node
-
-import { Command } from 'commander';
-import fs from 'node:fs';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// Find the components directory relative to the package
-function findComponentsDir() {
-  // Try to locate the components directory
-  const possiblePaths = [
-    // When running from the installed package
-    path.join(__dirname, 'src', 'components'),
-    // When running from the project root
-    path.join(__dirname, 'components'),
-    // When running from a cloned repo
-    path.join(__dirname, '..', 'src', 'components')
-  ];
-
-  for (const dir of possiblePaths) {
-    if (fs.existsSync(dir)) {
-      return dir;
-    }
-  }
-
-  // If components directory not found, return null
-  return null;
-}
-
-const COMPONENTS_DIR = findComponentsDir();
-
-// List available components in the components directory
-function listAvailableComponents() {
-  if (!COMPONENTS_DIR) {
-    return [];
-  }
-
-  try {
-    return fs.readdirSync(COMPONENTS_DIR)
-      .filter(file => file.endsWith('.svelte'))
-      .map(file => file.replace('.svelte', ''));
-  } catch (error) {
-    console.error('Error reading components directory:', error);
-    return [];
-  }
-}
-
-const program = new Command();
-
-program
-  .name('jera')
-  .description('Install Jera components to your project')
-  .version('0.0.1');
-
-program
-  .command('list')
-  .description('List all available components')
-  .action(() => {
-    const components = listAvailableComponents();
-
-    if (components.length === 0) {
-      console.log('No components found.');
-      return;
-    }
-
-    console.log('Available components:');
-    components.forEach(comp => console.log(`- ${comp}`));
-  });
-
-program
-  .command('add')
-  .description('Add a component to your project')
-  .argument('<component>', 'Component to add (e.g. Input)')
-  .option('-d, --dir <directory>', 'Target directory', 'src/lib/components')
-  .action((component, options) => {
-    console.log(`Adding ${component} to ${options.dir}...`);
-
-    const componentFile = component.endsWith('.svelte')
-      ? component
-      : `${component}.svelte`;
-
-    // Check if components directory exists
-    if (!COMPONENTS_DIR) {
-      console.error('Error: Components directory not found.');
-      console.error('This could happen if you\'re running the CLI in development mode');
-      console.error('or if the package structure has changed.');
-      return;
-    }
-
-    // Check if component exists
-    const sourceComponentPath = path.join(COMPONENTS_DIR, componentFile);
-    if (!fs.existsSync(sourceComponentPath)) {
-      console.error(`Error: Component "${component}" not found.`);
-      console.error('Available components:');
-      listAvailableComponents().forEach(comp => console.error(`- ${comp}`));
-      return;
-    }
-
-    // Create target directory if it doesn't exist
-    const targetDir = path.resolve(options.dir);
-    if (!fs.existsSync(targetDir)) {
-      fs.mkdirSync(targetDir, { recursive: true });
-    }
-
-    // Copy the component file
-    const componentContent = fs.readFileSync(sourceComponentPath, 'utf-8');
-    fs.writeFileSync(path.join(targetDir, componentFile), componentContent);
-
-    console.log(`Component ${component} added to ${options.dir}`);
-    console.log('\nUsage:');
-    console.log('\nNOTE: This component uses the Miozu theme.');
-    console.log('Make sure you have installed @miozu/js-theme and configured it in your Tailwind config.');
-  });
-
-// Add init command to set up the repository structure
-program
-  .command('init')
-  .description('Initialize a new project with Jera components')
-  .action(() => {
-    console.log('Initializing Jera components...');
-
-    const componentsDir = path.resolve('src/lib/components');
-
-    if (!fs.existsSync(componentsDir)) {
-      fs.mkdirSync(componentsDir, { recursive: true });
-    }
-
-    console.log('Project initialized! You can now add components with:');
-    console.log('  jera add <component>');
-  });
-
-program.parse();

package/www/components/jera/Input/Input.svelte

@@ -1,63 +0,0 @@
-<script>
-  let {
-    value = '',
-    ref = $bindable(),
-    type = 'text',
-    placeholder = '',
-    disabled = false,
-    required = false,
-    name = '',
-    id = '',
-    autocomplete = 'on',
-    autocorrect = 'off',
-    autocapitalize = 'off',
-    spellcheck = 'false',
-    maxlength = undefined,
-    minlength = undefined,
-    inputmode,
-    class: className = '',
-    unstyled = false,
-    disableBrowserFeatures = false,
-    oninput = () => {},
-    onchange = () => {},
-    onkeydown = () => {},
-    ...others
-  } = $props();
-
-  const finalAutocomplete = disableBrowserFeatures ? 'new-password' : autocomplete;
-  const finalClassName = $derived(unstyled ? className : `base-input ${className}`);
-</script>
-
-<input
-  class={finalClassName}
-  bind:this={ref}
-  {id}
-  {name}
-  {type}
-  {value}
-  {placeholder}
-  {disabled}
-  {required}
-  {inputmode}
-  {maxlength}
-  {minlength}
-  autocomplete={finalAutocomplete}
-  autocorrect={disableBrowserFeatures ? 'off' : autocorrect}
-  autocapitalize={disableBrowserFeatures ? 'off' : autocapitalize}
-  spellcheck={disableBrowserFeatures ? 'false' : spellcheck}
-  data-form-type={disableBrowserFeatures ? 'other' : undefined}
-  data-lpignore={disableBrowserFeatures ? 'true' : undefined}
-  {oninput}
-  {onchange}
-  {onkeydown}
-  {...others}
-/>
-
-<style>
-  .input-wrapper {
-    @apply relative;
-  }
-  .input-label {
-    @apply font-bold inline-block;
-  }
-</style>

package/www/components/jera/Input/index.js

@@ -1 +0,0 @@
-export { default } from './Input.svelte';