kigumi 0.2.0

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

@@ -0,0 +1,87 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './TreeItem.css';
+
+export interface TreeItemProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** Disables the tree item */
+  disabled?: boolean;
+  /** Expands the tree item */
+  expanded?: boolean;
+  /** Enables lazy loading behavior */
+  lazy?: boolean;
+  /** Draws the tree item in a selected state */
+  selected?: boolean;
+  /** Emitted when the item collapses */
+  onCollapse?: (event: CustomEvent) => void;
+  /** Emitted after collapse animation completes */
+  onAfterCollapse?: (event: CustomEvent) => void;
+  /** Emitted when the item expands */
+  onExpand?: (event: CustomEvent) => void;
+  /** Emitted after expand animation completes */
+  onAfterExpand?: (event: CustomEvent) => void;
+  /** Emitted when lazy state changes */
+  onLazyChange?: (event: CustomEvent) => void;
+  /** Emitted when a lazy item is selected for async loading */
+  onLazyLoad?: (event: CustomEvent) => void;
+}
+
+export interface TreeItemRef {
+  getChildrenItems: (options?: { includeDisabled?: boolean }) => HTMLElement[];
+  element: HTMLElement | null;
+}
+
+export const TreeItem = forwardRef<TreeItemRef, TreeItemProps>(
+  ({ children, className, onCollapse, onAfterCollapse, onExpand, onAfterExpand, onLazyChange, onLazyLoad, ...props }, ref) => {
+    const treeItemRef = useRef<HTMLElement & {
+      getChildrenItems?: (options?: { includeDisabled?: boolean }) => HTMLElement[];
+    }>(null);
+
+    useImperativeHandle(ref, () => ({
+      getChildrenItems: (options) => treeItemRef.current?.getChildrenItems?.(options) ?? [],
+      get element() {
+        return treeItemRef.current;
+      },
+    }), []);
+
+    useEffect(() => {
+      const el = treeItemRef.current;
+      if (!el) return;
+
+      const handleCollapse = (e: Event) => onCollapse?.(e as CustomEvent);
+      const handleAfterCollapse = (e: Event) => onAfterCollapse?.(e as CustomEvent);
+      const handleExpand = (e: Event) => onExpand?.(e as CustomEvent);
+      const handleAfterExpand = (e: Event) => onAfterExpand?.(e as CustomEvent);
+      const handleLazyChange = (e: Event) => onLazyChange?.(e as CustomEvent);
+      const handleLazyLoad = (e: Event) => onLazyLoad?.(e as CustomEvent);
+
+      el.addEventListener('wa-collapse', handleCollapse);
+      el.addEventListener('wa-after-collapse', handleAfterCollapse);
+      el.addEventListener('wa-expand', handleExpand);
+      el.addEventListener('wa-after-expand', handleAfterExpand);
+      el.addEventListener('wa-lazy-change', handleLazyChange);
+      el.addEventListener('wa-lazy-load', handleLazyLoad);
+
+      return () => {
+        el.removeEventListener('wa-collapse', handleCollapse);
+        el.removeEventListener('wa-after-collapse', handleAfterCollapse);
+        el.removeEventListener('wa-expand', handleExpand);
+        el.removeEventListener('wa-after-expand', handleAfterExpand);
+        el.removeEventListener('wa-lazy-change', handleLazyChange);
+        el.removeEventListener('wa-lazy-load', handleLazyLoad);
+      };
+    }, [onCollapse, onAfterCollapse, onExpand, onAfterExpand, onLazyChange, onLazyLoad]);
+
+    return (
+      <wa-tree-item
+        ref={treeItemRef}
+        class={clsx('TreeItem', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-tree-item>
+    );
+  }
+);
+
+TreeItem.displayName = 'TreeItem';

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

@@ -0,0 +1,21 @@
+/**
+ * ZoomableFrame Component Styles
+ * Documentation: https://webawesome.com/docs/components/zoomable-frame
+ *
+ * CSS Custom Properties:
+ * (No custom properties defined for this component)
+ *
+ * CSS Parts:
+ * - iframe: The internal <iframe> element
+ * - controls: The container that surrounds zoom control buttons
+ * - zoom-in-button: The zoom in button
+ * - zoom-out-button: The zoom out button
+ *
+ * @example
+ * .ZoomableFrame::part(iframe) {
+ *   // Custom styles
+ * }
+ */
+.ZoomableFrame {
+  /* Add your custom styles here */
+}

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

@@ -0,0 +1,52 @@
+import React, { useRef, useImperativeHandle, useEffect } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './ZoomableFrame.css';
+
+export const ZoomableFrame = React.forwardRef(
+  ({ children, className, onLoad, onError, ...props }, ref) => {
+    const frameRef = useRef(null);
+
+    useImperativeHandle(ref, () => ({
+      zoomIn: () => frameRef.current?.zoomIn?.(),
+      zoomOut: () => frameRef.current?.zoomOut?.(),
+      get contentDocument() {
+        return frameRef.current?.contentDocument ?? null;
+      },
+      get contentWindow() {
+        return frameRef.current?.contentWindow ?? null;
+      },
+      get element() {
+        return frameRef.current;
+      },
+    }), []);
+
+    useEffect(() => {
+      const el = frameRef.current;
+      if (!el) return;
+
+      const handleLoad = (e) => onLoad?.(e);
+      const handleError = (e) => onError?.(e);
+
+      el.addEventListener('load', handleLoad);
+      el.addEventListener('error', handleError);
+
+      return () => {
+        el.removeEventListener('load', handleLoad);
+        el.removeEventListener('error', handleError);
+      };
+    }, [onLoad, onError]);
+
+    return (
+      <wa-zoomable-frame
+        ref={frameRef}
+        class={clsx('ZoomableFrame', className)}
+        {...props}
+      >
+        {children}
+      </wa-zoomable-frame>
+    );
+  }
+);
+
+ZoomableFrame.displayName = 'ZoomableFrame';

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

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { ZoomableFrame } from './ZoomableFrame';
+
+describe('ZoomableFrame', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<ZoomableFrame src="https://example.com" />);
+    expect(container.querySelector('wa-zoomable-frame')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { ZoomableFrame } from './ZoomableFrame';
+
+describe('ZoomableFrame', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<ZoomableFrame src="https://example.com" />);
+    expect(container.querySelector('wa-zoomable-frame')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<ZoomableFrame src="https://example.com" className="custom-class" />);
+    expect(container.querySelector('.custom-class')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,92 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './ZoomableFrame.css';
+
+export interface ZoomableFrameProps extends Omit<HTMLAttributes<HTMLElement>, 'onLoad' | 'onError' | 'dir'> {
+  /** Enables fullscreen mode */
+  allowfullscreen?: boolean;
+  /** Controls iframe loading behavior */
+  loading?: 'eager' | 'lazy';
+  /** Manages referrer information */
+  referrerpolicy?: string;
+  /** Applies security restrictions */
+  sandbox?: string;
+  /** URL of content to display */
+  src?: string;
+  /** Inline HTML to render (takes precedence over src) */
+  srcdoc?: string;
+  /** Hides zoom control interface */
+  withoutControls?: boolean;
+  /** Disables frame interaction */
+  withoutInteraction?: boolean;
+  /** Current zoom level */
+  zoom?: number;
+  /** Available zoom increments */
+  zoomLevels?: string;
+  /** Fires when internal iframe completes loading */
+  onLoad?: (event: Event) => void;
+  /** Fires when internal iframe fails to load */
+  onError?: (event: Event) => void;
+}
+
+export interface ZoomableFrameRef {
+  zoomIn: () => void;
+  zoomOut: () => void;
+  contentDocument: Document | null;
+  contentWindow: Window | null;
+  element: HTMLElement | null;
+}
+
+export const ZoomableFrame = forwardRef<ZoomableFrameRef, ZoomableFrameProps>(
+  ({ children, className, onLoad, onError, ...props }, ref) => {
+    const frameRef = useRef<HTMLElement & {
+      zoomIn?: () => void;
+      zoomOut?: () => void;
+      contentDocument?: Document | null;
+      contentWindow?: Window | null;
+    }>(null);
+
+    useImperativeHandle(ref, () => ({
+      zoomIn: () => frameRef.current?.zoomIn?.(),
+      zoomOut: () => frameRef.current?.zoomOut?.(),
+      get contentDocument() {
+        return frameRef.current?.contentDocument ?? null;
+      },
+      get contentWindow() {
+        return frameRef.current?.contentWindow ?? null;
+      },
+      get element() {
+        return frameRef.current;
+      },
+    }), []);
+
+    useEffect(() => {
+      const el = frameRef.current;
+      if (!el) return;
+
+      const handleLoad = (e: Event) => onLoad?.(e);
+      const handleError = (e: Event) => onError?.(e);
+
+      el.addEventListener('load', handleLoad);
+      el.addEventListener('error', handleError);
+
+      return () => {
+        el.removeEventListener('load', handleLoad);
+        el.removeEventListener('error', handleError);
+      };
+    }, [onLoad, onError]);
+
+    return (
+      <wa-zoomable-frame
+        ref={frameRef}
+        class={clsx('ZoomableFrame', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-zoomable-frame>
+    );
+  }
+);
+
+ZoomableFrame.displayName = 'ZoomableFrame';

package/dist/templates/react/vite-env.d.ts.hbs

@@ -0,0 +1,21 @@
+/// <reference types="vite/client" />
+
+/**
+ * Web Awesome JSX Types
+ * 
+ * Provides type support for Web Awesome custom elements in React.
+ * The CLI automatically adds new component types when you run `kigumi add`.
+ * 
+ * Note: This file is auto-managed by Kigumi CLI. Manual edits are preserved.
+ * 
+ * @see https://webawesome.com/docs/react
+ */
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      // Web Awesome components (auto-managed by Kigumi CLI)
+    }
+  }
+}
+
+export {};

package/dist/tier-2ZEZT6E3.js

@@ -0,0 +1,12 @@
+import {
+  detectTier,
+  detectTierSync,
+  getProToken,
+  getWebAwesomePackage
+} from "./chunk-IRCCX2A2.js";
+export {
+  detectTier,
+  detectTierSync,
+  getProToken,
+  getWebAwesomePackage
+};

package/dist/tier-GFXZQZUI.js

@@ -0,0 +1,12 @@
+import {
+  detectTier,
+  detectTierSync,
+  getProToken,
+  getWebAwesomePackage
+} from "./chunk-FG4CIVPT.js";
+export {
+  detectTier,
+  detectTierSync,
+  getProToken,
+  getWebAwesomePackage
+};

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "kigumi",
+  "version": "0.2.0",
+  "description": "CLI tool to add Web Awesome components to your project",
+  "type": "module",
+  "bin": {
+    "kigumi": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Siregar/kigumi-cli.git"
+  },
+  "homepage": "https://github.com/Siregar/kigumi-cli#readme",
+  "bugs": {
+    "url": "https://github.com/Siregar/kigumi-cli/issues"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "tsx watch src/index.ts",
+    "build": "tsup src/index.ts --format esm --dts && cp -r templates dist/",
+    "start": "node dist/index.js",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run tests/unit",
+    "test:watch": "vitest",
+    "test:e2e": "vitest run tests/e2e --testTimeout=300000",
+    "test:all": "vitest run",
+    "verify:app": "tsx scripts/verify-test-app.ts",
+    "lint": "eslint src tests",
+    "lint:fix": "eslint src tests --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json}\" \"tests/**/*.{ts,tsx,js,jsx,json}\" \"*.{js,json,md}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json}\" \"tests/**/*.{ts,tsx,js,jsx,json}\" \"*.{js,json,md}\"",
+    "lint-staged": "lint-staged",
+    "prepare": "husky",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "pnpm build && changeset publish"
+  },
+  "keywords": [
+    "web-awesome",
+    "components",
+    "cli",
+    "react",
+    "vue",
+    "ui"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@clack/prompts": "^0.11.0",
+    "cheerio": "^1.2.0",
+    "commander": "^11.1.0",
+    "cosmiconfig": "^9.0.0",
+    "execa": "^8.0.1",
+    "fs-extra": "^11.2.0",
+    "handlebars": "^4.7.8",
+    "picocolors": "^1.0.0",
+    "ts-morph": "^27.0.2",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.8",
+    "@eslint/js": "^9.39.2",
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^20.11.5",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "prettier": "^3.7.4",
+    "tsup": "^8.0.1",
+    "tsx": "^4.7.0",
+    "typescript": "^5.3.3",
+    "typescript-eslint": "^8.52.0",
+    "vitest": "^4.0.16"
+  }
+}

package/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/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 */
+}