kigumi 0.2.0

package/dist/project-config-4YGWM3KJ.js

@@ -0,0 +1,92 @@
+// src/utils/project-config.ts
+import fs2 from "fs-extra";
+import path from "path";
+
+// src/utils/json.ts
+import fs from "fs-extra";
+async function readJSONWithComments(filePath) {
+  const content = await fs.readFile(filePath, "utf-8");
+  const stripped = stripJSONComments(content);
+  return JSON.parse(stripped);
+}
+function stripJSONComments(content) {
+  return content.replace(/\/\/.*/g, "").replace(/\/\*[\s\S]*?\*\//g, "");
+}
+
+// src/utils/project-config.ts
+async function configureVitePathAliases(cwd, output) {
+  const viteConfigTs = path.join(cwd, "vite.config.ts");
+  const viteConfigJs = path.join(cwd, "vite.config.js");
+  let configPath = null;
+  if (await fs2.pathExists(viteConfigTs)) {
+    configPath = viteConfigTs;
+  } else if (await fs2.pathExists(viteConfigJs)) {
+    configPath = viteConfigJs;
+  }
+  if (!configPath) {
+    return false;
+  }
+  let content = await fs2.readFile(configPath, "utf-8");
+  if (content.includes("alias:") && content.includes("'@'")) {
+    return false;
+  }
+  if (!content.includes("import path from 'path'") && !content.includes('import path from "path"')) {
+    const lines = content.split("\n");
+    let lastImportIndex = -1;
+    for (let i = 0; i < lines.length; i++) {
+      if (lines[i].trim().startsWith("import ")) {
+        lastImportIndex = i;
+      }
+    }
+    if (lastImportIndex >= 0) {
+      lines.splice(lastImportIndex + 1, 0, "import path from 'path';");
+      content = lines.join("\n");
+    }
+  }
+  if (content.includes("resolve:")) {
+    return false;
+  }
+  const resolveConfig = `
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },`;
+  const defineConfigMatch = content.match(/export default defineConfig\(\{/);
+  if (!defineConfigMatch) {
+    output.warn("Could not parse vite.config, skipping path alias config");
+    return false;
+  }
+  content = content.replace(
+    /export default defineConfig\(\{/,
+    `export default defineConfig({${resolveConfig}`
+  );
+  await fs2.writeFile(configPath, content);
+  return true;
+}
+async function configureTSConfig(cwd, _output) {
+  const tsconfigAppPath = path.join(cwd, "tsconfig.app.json");
+  if (!await fs2.pathExists(tsconfigAppPath)) {
+    return false;
+  }
+  const tsconfig = await readJSONWithComments(tsconfigAppPath);
+  let modified = false;
+  tsconfig.compilerOptions = tsconfig.compilerOptions || {};
+  if (!tsconfig.compilerOptions.paths?.["@/*"]) {
+    tsconfig.compilerOptions.baseUrl = tsconfig.compilerOptions.baseUrl || ".";
+    tsconfig.compilerOptions.paths = {
+      ...tsconfig.compilerOptions.paths,
+      "@/*": ["./src/*"]
+    };
+    modified = true;
+  }
+  if (modified) {
+    await fs2.writeJSON(tsconfigAppPath, tsconfig, { spaces: 2 });
+  }
+  return modified;
+}
+export {
+  configureTSConfig,
+  configureTSConfig as configureTSConfigPathAliases,
+  configureVitePathAliases
+};

package/dist/project-config-YLUSQM7U.js

@@ -0,0 +1,108 @@
+// src/utils/project-config.ts
+import fs2 from "fs-extra";
+import path from "path";
+
+// src/utils/json.ts
+import fs from "fs-extra";
+async function readJSONWithComments(filePath) {
+  const content = await fs.readFile(filePath, "utf-8");
+  const stripped = stripJSONComments(content);
+  return JSON.parse(stripped);
+}
+function stripJSONComments(content) {
+  return content.replace(/\/\/.*/g, "").replace(/\/\*[\s\S]*?\*\//g, "");
+}
+
+// src/utils/project-config.ts
+async function configureVitePathAliases(cwd, output) {
+  const viteConfigTs = path.join(cwd, "vite.config.ts");
+  const viteConfigJs = path.join(cwd, "vite.config.js");
+  let configPath = null;
+  if (await fs2.pathExists(viteConfigTs)) {
+    configPath = viteConfigTs;
+  } else if (await fs2.pathExists(viteConfigJs)) {
+    configPath = viteConfigJs;
+  }
+  if (!configPath) {
+    return false;
+  }
+  let content = await fs2.readFile(configPath, "utf-8");
+  if (content.includes("alias:") && content.includes("'@'")) {
+    return false;
+  }
+  if (!content.includes("import path from 'path'") && !content.includes('import path from "path"')) {
+    const lines = content.split("\n");
+    let lastImportIndex = -1;
+    for (let i = 0; i < lines.length; i++) {
+      if (lines[i].trim().startsWith("import ")) {
+        lastImportIndex = i;
+      }
+    }
+    if (lastImportIndex >= 0) {
+      lines.splice(lastImportIndex + 1, 0, "import path from 'path';");
+      content = lines.join("\n");
+    }
+  }
+  if (content.includes("resolve:")) {
+    return false;
+  }
+  const resolveConfig = `
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },`;
+  const defineConfigMatch = content.match(/export default defineConfig\(\{/);
+  if (!defineConfigMatch) {
+    output.warn("Could not parse vite.config, skipping path alias config");
+    return false;
+  }
+  content = content.replace(
+    /export default defineConfig\(\{/,
+    `export default defineConfig({${resolveConfig}`
+  );
+  await fs2.writeFile(configPath, content);
+  return true;
+}
+async function configureTSConfig(cwd, _output) {
+  const tsconfigAppPath = path.join(cwd, "tsconfig.app.json");
+  if (!await fs2.pathExists(tsconfigAppPath)) {
+    return false;
+  }
+  const tsconfig = await readJSONWithComments(tsconfigAppPath);
+  let modified = false;
+  tsconfig.compilerOptions = tsconfig.compilerOptions || {};
+  if (!tsconfig.compilerOptions.paths?.["@/*"]) {
+    tsconfig.compilerOptions.baseUrl = tsconfig.compilerOptions.baseUrl || ".";
+    tsconfig.compilerOptions.paths = {
+      ...tsconfig.compilerOptions.paths,
+      "@/*": ["./src/*"]
+    };
+    modified = true;
+  }
+  if (tsconfig.compilerOptions.esModuleInterop !== true) {
+    tsconfig.compilerOptions.esModuleInterop = true;
+    modified = true;
+  }
+  if (tsconfig.compilerOptions.allowSyntheticDefaultImports !== true) {
+    tsconfig.compilerOptions.allowSyntheticDefaultImports = true;
+    modified = true;
+  }
+  if (tsconfig.compilerOptions.verbatimModuleSyntax === true) {
+    delete tsconfig.compilerOptions.verbatimModuleSyntax;
+    modified = true;
+  }
+  if (Array.isArray(tsconfig.compilerOptions.types) && tsconfig.compilerOptions.types.length === 1 && tsconfig.compilerOptions.types[0] === "vite/client") {
+    delete tsconfig.compilerOptions.types;
+    modified = true;
+  }
+  if (modified) {
+    await fs2.writeJSON(tsconfigAppPath, tsconfig, { spaces: 2 });
+  }
+  return modified;
+}
+export {
+  configureTSConfig,
+  configureTSConfig as configureTSConfigPathAliases,
+  configureVitePathAliases
+};

package/dist/templates/AGENTS.md

@@ -0,0 +1,214 @@
+# Templates Guide
+
+> Handlebars templates for component generation - extends [root AGENTS.md](../AGENTS.md)
+
+## Directory Structure
+
+```
+templates/
+└── react/
+    └── {Component}/
+        ├── {Component}.tsx.hbs    # TypeScript (with interfaces)
+        ├── {Component}.jsx.hbs    # JavaScript (with JSDoc)
+        ├── {Component}.test.tsx.hbs
+        ├── {Component}.test.jsx.hbs
+        └── {Component}.css.hbs
+```
+
+## Template Variables
+
+Available in all `.hbs` templates:
+
+| Variable           | Example                           | Description                 |
+| ------------------ | --------------------------------- | --------------------------- |
+| `{{{importPath}}}` | `@awesome.me/webawesome/dist/...` | Web Awesome import path     |
+| `{{name}}`         | `Button`                          | Component name (PascalCase) |
+| `{{tagName}}`      | `wa-button`                       | Web component tag           |
+| `{{description}}`  | `Buttons represent actions...`    | From Web Awesome docs       |
+
+---
+
+## Component Patterns
+
+### Simple Component (no events/methods)
+
+Use for: Icon, Badge, Divider, Spinner, etc.
+
+```typescript
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './{{name}}.css';
+
+export interface {{name}}Props extends HTMLAttributes<HTMLElement> {
+  // Props matching wa-* attributes
+}
+
+export const {{name}} = forwardRef<HTMLElement, {{name}}Props>(
+  ({ className, ...props }, ref) => (
+    <wa-{{tagName}} ref={ref} class={clsx('{{name}}', className)} {...props} />
+  )
+);
+
+{{name}}.displayName = '{{name}}';
+```
+
+### Complex Component (with events/methods)
+
+Use for: Dialog, Drawer, Dropdown, Select, etc.
+
+```typescript
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './{{name}}.css';
+
+export interface {{name}}Props extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  // Props
+  onShow?: (event: CustomEvent) => void;   // wa-show
+  onHide?: (event: CustomEvent) => void;   // wa-hide
+}
+
+export interface {{name}}Ref {
+  show: () => void;
+  hide: () => void;
+  element: HTMLElement | null;
+}
+
+export const {{name}} = forwardRef<{{name}}Ref, {{name}}Props>(
+  ({ className, onShow, onHide, ...props }, ref) => {
+    const internalRef = useRef<HTMLElement & { show?: () => void; requestClose?: () => void }>(null);
+
+    useImperativeHandle(ref, () => ({
+      show: () => internalRef.current?.show?.(),
+      hide: () => internalRef.current?.requestClose?.(),
+      get element() { return internalRef.current; },
+    }), []);
+
+    useEffect(() => {
+      const el = internalRef.current;
+      if (!el) return;
+
+      const handleShow = (e: Event) => onShow?.(e as CustomEvent);
+      const handleHide = (e: Event) => onHide?.(e as CustomEvent);
+
+      el.addEventListener('wa-show', handleShow);
+      el.addEventListener('wa-hide', handleHide);
+
+      return () => {
+        el.removeEventListener('wa-show', handleShow);
+        el.removeEventListener('wa-hide', handleHide);
+      };
+    }, [onShow, onHide]);
+
+    return (
+      <wa-{{tagName}} ref={internalRef} class={clsx('{{name}}', className)} {...props} />
+    );
+  }
+);
+
+{{name}}.displayName = '{{name}}';
+```
+
+---
+
+## Critical Rules
+
+### 1. Use `class`, NOT `className`
+
+```typescript
+// Correct
+<wa-button class={clsx('Button', className)}>
+
+// Wrong
+<wa-button className={className}>
+```
+
+### 2. React Import Style
+
+**TypeScript (.tsx.hbs):** Named imports
+
+```typescript
+import { forwardRef, useRef, useEffect } from 'react';
+```
+
+**JavaScript (.jsx.hbs):** Default import
+
+```javascript
+import React from 'react';
+const { forwardRef, useRef, useEffect } = React;
+```
+
+### 3. Event Naming Convention
+
+| Web Awesome     | React Prop    |
+| --------------- | ------------- |
+| `wa-show`       | `onShow`      |
+| `wa-hide`       | `onHide`      |
+| `wa-after-show` | `onAfterShow` |
+| `wa-blur`       | `onBlur`      |
+| `wa-focus`      | `onFocus`     |
+| `wa-change`     | `onChange`    |
+
+### 4. Always Cleanup Event Listeners
+
+```typescript
+useEffect(() => {
+  const el = ref.current;
+  if (!el) return;
+
+  el.addEventListener('wa-show', handler);
+  return () => el.removeEventListener('wa-show', handler); // REQUIRED
+}, [dep]);
+```
+
+### 5. Use `requestClose()`, not `hide()`
+
+For dialogs/drawers, Web Awesome uses `requestClose()`:
+
+```typescript
+hide: () => dialogRef.current?.requestClose(),
+```
+
+### 6. Omit Conflicting HTMLAttributes
+
+Some wa-\* attributes conflict with HTMLAttributes:
+
+```typescript
+// Omit conflicting types
+export interface DialogProps extends Omit<HTMLAttributes<HTMLElement>, 'onLoad' | 'dir'> {
+```
+
+---
+
+## Adding New Components
+
+1. **Check Web Awesome docs** at `https://webawesome.com/docs/components/{name}`
+2. **Update registry** in `src/utils/registry.ts`
+3. **Create template folder** in `templates/react/{Name}/`
+4. **Create all files:**
+   - `{Name}.tsx.hbs` (TypeScript)
+   - `{Name}.jsx.hbs` (JavaScript)
+   - `{Name}.test.tsx.hbs`
+   - `{Name}.test.jsx.hbs`
+   - `{Name}.css.hbs`
+5. **Build and test:**
+   ```bash
+   pnpm build
+   node dist/index.js add {name} --overwrite
+   ```
+
+---
+
+## Reference Templates
+
+| Pattern                   | Example                          |
+| ------------------------- | -------------------------------- |
+| Simple                    | `Button/Button.tsx.hbs`          |
+| Complex (events)          | `Dialog/Dialog.tsx.hbs`          |
+| Complex (two-way binding) | `Input/Input.tsx.hbs`            |
+| Sub-components            | `Breadcrumb/`, `BreadcrumbItem/` |
+
+---
+
+**Parent:** [AGENTS.md](../AGENTS.md)

package/dist/templates/react/AnimatedImage/AnimatedImage.css.hbs

@@ -0,0 +1,19 @@
+/**
+ * AnimatedImage Component Styles
+ * Documentation: https://webawesome.com/docs/components/animated-image
+ *
+ * CSS Custom Properties:
+ * - --control-box-size: The size of the icon box
+ * - --icon-size: The size of the play/pause icons
+ *
+ * CSS Parts:
+ * - control-box: The container that surrounds the pause/play icons and provides their background
+ *
+ * @example
+ * .AnimatedImage::part(control-box) {
+ *   // Custom styles
+ * }
+ */
+.AnimatedImage {
+  /* Add your custom styles here */
+}

package/dist/templates/react/AnimatedImage/AnimatedImage.jsx.hbs

@@ -0,0 +1,64 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './AnimatedImage.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```jsx
+ * <AnimatedImage 
+ *   src="https://example.com/animation.gif" 
+ *   alt="Animated illustration"
+ *   play
+ * />
+ * ```
+ *
+ * @typedef {Object} AnimatedImageProps
+ * @property {string} src - The path to the image to load
+ * @property {string} alt - A description of the image used by assistive devices
+ * @property {boolean} [play] - Plays the animation
+ * @property {function} [onLoad] - Event fired when the image loads successfully
+ * @property {function} [onError] - Event fired when the image fails to load
+ * @property {string} [className] - Additional CSS classes
+ */
+
+export const AnimatedImage = React.forwardRef(
+  ({ className, onLoad, onError, ...props }, ref) => {
+    const elementRef = React.useRef(null);
+
+    React.useImperativeHandle(ref, () => elementRef.current, []);
+
+    React.useEffect(() => {
+      const el = elementRef.current;
+      if (!el) return;
+
+      const handleLoad = (e) => {
+        if (onLoad) onLoad(e);
+      };
+
+      const handleError = (e) => {
+        if (onError) onError(e);
+      };
+
+      el.addEventListener('wa-load', handleLoad);
+      el.addEventListener('wa-error', handleError);
+
+      return () => {
+        el.removeEventListener('wa-load', handleLoad);
+        el.removeEventListener('wa-error', handleError);
+      };
+    }, [onLoad, onError]);
+
+    return (
+      <wa-animated-image
+        ref={elementRef}
+        class={clsx('AnimatedImage', className)}
+        {...props}
+      />
+    );
+  }
+);
+
+AnimatedImage.displayName = 'AnimatedImage';

package/dist/templates/react/AnimatedImage/AnimatedImage.test.jsx.hbs

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { AnimatedImage } from './AnimatedImage';
+
+describe('AnimatedImage', () => {
+  it('renders without crashing', () => {
+    const { container } = render(
+      <AnimatedImage src="test.gif" alt="Test animation" />
+    );
+    expect(container.querySelector('wa-animated-image')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <AnimatedImage src="test.gif" alt="Test" className="custom-class" />
+    );
+    const element = container.querySelector('wa-animated-image');
+    expect(element?.getAttribute('class')).toContain('custom-class');
+  });
+
+  it('passes src and alt props', () => {
+    const { container } = render(
+      <AnimatedImage src="animation.gif" alt="My animation" />
+    );
+    const element = container.querySelector('wa-animated-image');
+    expect(element?.getAttribute('src')).toBe('animation.gif');
+    expect(element?.getAttribute('alt')).toBe('My animation');
+  });
+});

package/dist/templates/react/AnimatedImage/AnimatedImage.test.tsx.hbs

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { AnimatedImage } from './AnimatedImage';
+
+describe('AnimatedImage', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<AnimatedImage src="test.gif" alt="Test" />);
+    expect(container.querySelector('wa-animated-image')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<AnimatedImage src="test.gif" alt="Test" className="custom-class" />);
+    expect(container.querySelector('.custom-class')).toBeInTheDocument();
+  });
+});

package/dist/templates/react/AnimatedImage/AnimatedImage.tsx.hbs

@@ -0,0 +1,68 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './AnimatedImage.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```tsx
+ * <AnimatedImage 
+ *   src="https://example.com/animation.gif" 
+ *   alt="Animated illustration"
+ *   play
+ * />
+ * ```
+ */
+export interface AnimatedImageProps extends Omit<HTMLAttributes<HTMLElement>, 'onLoad' | 'onError' | 'dir'> {
+  /** The path to the image to load */
+  src: string;
+  /** A description of the image used by assistive devices */
+  alt: string;
+  /** Plays the animation. When this attribute is removed, the animation will pause */
+  play?: boolean;
+  /** Event fired when the image loads successfully */
+  onLoad?: (event: CustomEvent) => void;
+  /** Event fired when the image fails to load */
+  onError?: (event: CustomEvent) => void;
+}
+
+export const AnimatedImage = forwardRef<HTMLElement, AnimatedImageProps>(
+  ({ className, onLoad, onError, ...props }, ref) => {
+    const elementRef = useRef<HTMLElement>(null);
+
+    useImperativeHandle(ref, () => elementRef.current as HTMLElement, []);
+
+    useEffect(() => {
+      const el = elementRef.current;
+      if (!el) return;
+
+      const handleLoad = (e: Event) => {
+        if (onLoad) onLoad(e as CustomEvent);
+      };
+
+      const handleError = (e: Event) => {
+        if (onError) onError(e as CustomEvent);
+      };
+
+      el.addEventListener('wa-load', handleLoad);
+      el.addEventListener('wa-error', handleError);
+
+      return () => {
+        el.removeEventListener('wa-load', handleLoad);
+        el.removeEventListener('wa-error', handleError);
+      };
+    }, [onLoad, onError]);
+
+    return (
+      <wa-animated-image
+        ref={elementRef}
+        class={clsx('AnimatedImage', className)}
+        {...(props as Record<string, unknown>)}
+      />
+    );
+  }
+);
+
+AnimatedImage.displayName = 'AnimatedImage';

package/dist/templates/react/Animation/Animation.css.hbs

@@ -0,0 +1,18 @@
+/**
+ * Animation Component Styles
+ * Documentation: https://webawesome.com/docs/components/animation
+ *
+ * CSS Custom Properties:
+ * (No custom properties defined for this component)
+ *
+ * CSS Parts:
+ * (No CSS parts defined for this component)
+ *
+ * @example
+ * .Animation {
+ *   // Custom styles
+ * }
+ */
+.Animation {
+  /* Add your custom styles here */
+}