kigumi 0.2.0

package/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/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 {};