solid-tom-ui 1.0.10 → 1.0.14

package/dist/skill/hover-3d-image.skill.md.txt

@@ -1,120 +1,120 @@
-## COMPONENT IDENTITY
-- **Import**: `import { Hover3DImage } from 'solid-tom-ui';`
-- **Export**: `Hover3DImage` (named export)
-- **Framework**: SolidJS
-- **Purpose**: Interactive 3D tilt image card — responds to mouse movement with a CSS perspective effect; requires global `hover-3d` CSS class
-
-## TYPE SIGNATURE
-
-```typescript
-import { Hover3DImage } from 'solid-tom-ui';
-import type { Image } from 'solid-tom-ui';
-
-<Hover3DImage
-  image={Image}                                          // REQUIRED: image descriptor object
-  class?={Partial<Record<'root' | 'figure' | 'image', string>>}  // optional per-slot class overrides
-/>
-```
-
-### `Image` type (from `@/utils/helper`)
-```typescript
-type Image = {
-  src: string;      // image URL
-  alt?: string;     // alt text
-  class?: string;   // class on the <img> element
-  [key: string]: any; // other img attributes (width, height, loading, etc.)
-}
-```
-
-## INTERNAL STRUCTURE
-```
-div.hover-3d[class.root]
-  figure.rounded-2xl[class.figure]
-    img[...image props][class.image]   ← spreads all Image props onto <img>
-  div × 8                              ← required overlay divs for 3D CSS effect
-```
-> The 9 child divs (1 figure + 8 empty divs) are structural requirements for the CSS 3D hover effect. Do NOT remove or reorder them.
-
-## USAGE PATTERNS
-
-### Basic usage
-```tsx
-import { Hover3DImage } from 'solid-tom-ui';
-
-<Hover3DImage
-  image={{ src: '/images/product.jpg', alt: 'Product showcase' }}
-/>
-```
-
-### With width constraint on image
-```tsx
-<Hover3DImage
-  image={{
-    src: 'https://example.com/photo.jpg',
-    alt: '3D card',
-    class: 'w-[500px]',
-  }}
-/>
-```
-
-### With layout centering
-```tsx
-<Hover3DImage
-  class={{ root: 'mx-auto' }}
-  image={{ src: '/hero.jpg', alt: 'Hero image', class: 'w-full' }}
-/>
-```
-
-### With custom figure and image classes
-```tsx
-<Hover3DImage
-  image={{ src: '/banner.webp', alt: 'Banner', class: 'object-cover h-64' }}
-  class={{
-    root: 'max-w-md',
-    figure: 'shadow-xl',
-    image: 'rounded-xl',
-  }}
-/>
-```
-
-## CLASS SLOTS
-| Slot | Targets | Notes |
-|------|---------|-------|
-| `root` | `div.hover-3d` | Outermost wrapper — use for sizing/positioning |
-| `figure` | `figure` | Always has `rounded-2xl`; extend here for shadow, overflow, etc. |
-| `image` | `img` | Applied via `image.class` prop (not via `class.image` — `class.image` is not wired in current impl) |
-
-> **Note**: `class.image` slot is declared in the type but the `<img>` element only spreads the `image` object props. To add classes to the `<img>`, put them in `image.class`.
-
-## CONSTRAINTS
-- The component requires the `hover-3d` CSS utility class to be globally available. Ensure the project's global stylesheet includes the 3D hover animation rules.
-- The 8 empty `<div>` children inside `.hover-3d` are part of the CSS trick (grid/overlay for mouse tracking). They must not be conditionally removed.
-- This component is purely presentational — no internal state or events.
-
-## ANTI-PATTERNS
-```tsx
-// ❌ Missing required image prop
-<Hover3DImage />
-
-// ❌ Trying to class the img via class.image (not wired)
-<Hover3DImage image={{ src: '...' }} class={{ image: 'w-64' }} />
-// ✅ Correct: put image class inside the image object
-<Hover3DImage image={{ src: '...', class: 'w-64' }} />
-
-// ❌ Wrapping in another container that constrains height unexpectedly
-// ✅ Use class.root for sizing instead
-<Hover3DImage image={{ src: '...' }} class={{ root: 'w-72' }} />
-```
-
-## DECISION RULES
-- Use this component for hero images, product showcases, or any image that benefits from an interactive 3D tilt effect on hover.
-- Control the image size via `image.class` (e.g., `class: 'w-[400px]'`).
-- Control component placement/layout via `class.root`.
-- Control card shape/shadow via `class.figure`.
----
-
-## Component Conventions
-
-> **CSS encoding**: internal CSS classes use short encoded names (e.g. `h301`, `h302`) per project convention.
-
-> **Unique IDs**: if this component needs to generate HTML `id` attributes, always use `createUniqueId()` from `solid-js` — never `Math.random()` or `Date.now()`.
+## COMPONENT IDENTITY
+- **Import**: `import { Hover3DImage } from 'solid-tom-ui';`
+- **Export**: `Hover3DImage` (named export)
+- **Framework**: SolidJS
+- **Purpose**: Interactive 3D tilt image card — responds to mouse movement with a CSS perspective effect; requires global `hover-3d` CSS class
+
+## TYPE SIGNATURE
+
+```typescript
+import { Hover3DImage } from 'solid-tom-ui';
+import type { Image } from 'solid-tom-ui';
+
+<Hover3DImage
+  image={Image}                                          // REQUIRED: image descriptor object
+  class?={Partial<Record<'root' | 'figure' | 'image', string>>}  // optional per-slot class overrides
+/>
+```
+
+### `Image` type (from `@/utils/helper`)
+```typescript
+type Image = {
+  src: string;      // image URL
+  alt?: string;     // alt text
+  class?: string;   // class on the <img> element
+  [key: string]: any; // other img attributes (width, height, loading, etc.)
+}
+```
+
+## INTERNAL STRUCTURE
+```
+div.hover-3d[class.root]
+  figure.rounded-2xl[class.figure]
+    img[...image props][class.image]   ← spreads all Image props onto <img>
+  div × 8                              ← required overlay divs for 3D CSS effect
+```
+> The 9 child divs (1 figure + 8 empty divs) are structural requirements for the CSS 3D hover effect. Do NOT remove or reorder them.
+
+## USAGE PATTERNS
+
+### Basic usage
+```tsx
+import { Hover3DImage } from 'solid-tom-ui';
+
+<Hover3DImage
+  image={{ src: '/images/product.jpg', alt: 'Product showcase' }}
+/>
+```
+
+### With width constraint on image
+```tsx
+<Hover3DImage
+  image={{
+    src: 'https://example.com/photo.jpg',
+    alt: '3D card',
+    class: 'w-[500px]',
+  }}
+/>
+```
+
+### With layout centering
+```tsx
+<Hover3DImage
+  class={{ root: 'mx-auto' }}
+  image={{ src: '/hero.jpg', alt: 'Hero image', class: 'w-full' }}
+/>
+```
+
+### With custom figure and image classes
+```tsx
+<Hover3DImage
+  image={{ src: '/banner.webp', alt: 'Banner', class: 'object-cover h-64' }}
+  class={{
+    root: 'max-w-md',
+    figure: 'shadow-xl',
+    image: 'rounded-xl',
+  }}
+/>
+```
+
+## CLASS SLOTS
+| Slot | Targets | Notes |
+|------|---------|-------|
+| `root` | `div.hover-3d` | Outermost wrapper — use for sizing/positioning |
+| `figure` | `figure` | Always has `rounded-2xl`; extend here for shadow, overflow, etc. |
+| `image` | `img` | Applied via `image.class` prop (not via `class.image` — `class.image` is not wired in current impl) |
+
+> **Note**: `class.image` slot is declared in the type but the `<img>` element only spreads the `image` object props. To add classes to the `<img>`, put them in `image.class`.
+
+## CONSTRAINTS
+- The component requires the `hover-3d` CSS utility class to be globally available. Ensure the project's global stylesheet includes the 3D hover animation rules.
+- The 8 empty `<div>` children inside `.hover-3d` are part of the CSS trick (grid/overlay for mouse tracking). They must not be conditionally removed.
+- This component is purely presentational — no internal state or events.
+
+## ANTI-PATTERNS
+```tsx
+// ❌ Missing required image prop
+<Hover3DImage />
+
+// ❌ Trying to class the img via class.image (not wired)
+<Hover3DImage image={{ src: '...' }} class={{ image: 'w-64' }} />
+// ✅ Correct: put image class inside the image object
+<Hover3DImage image={{ src: '...', class: 'w-64' }} />
+
+// ❌ Wrapping in another container that constrains height unexpectedly
+// ✅ Use class.root for sizing instead
+<Hover3DImage image={{ src: '...' }} class={{ root: 'w-72' }} />
+```
+
+## DECISION RULES
+- Use this component for hero images, product showcases, or any image that benefits from an interactive 3D tilt effect on hover.
+- Control the image size via `image.class` (e.g., `class: 'w-[400px]'`).
+- Control component placement/layout via `class.root`.
+- Control card shape/shadow via `class.figure`.
+---
+
+## Component Conventions
+
+> **CSS encoding**: internal CSS classes use short encoded names (e.g. `h301`, `h302`) per project convention.
+
+> **Unique IDs**: if this component needs to generate HTML `id` attributes, always use `createUniqueId()` from `solid-js` — never `Math.random()` or `Date.now()`.

package/dist/skill/iframe.skill.md.txt

@@ -1,114 +1,114 @@
-## COMPONENT IDENTITY
-- **Import**: `import { Iframe } from 'solid-tom-ui';`
-- **Export**: `Iframe` (named export)
-- **Framework**: SolidJS
-- **Purpose**: Renders a SolidJS component inside a sandboxed `<iframe>` — inherits parent styles, sets up event delegation, and preserves reactivity across the iframe boundary
-
-## PURPOSE
-Renders a SolidJS component inside a sandboxed `<iframe>` element while:
-1. Cloning all parent `<style>` and `<link rel="stylesheet">` tags into the iframe `<head>` so styles are inherited.
-2. Setting up SolidJS event delegation inside the iframe document (`click`, `mousedown`, `input`, `change`, `focus`, `blur`).
-3. Running the component under the parent's reactive owner context, preserving reactivity and signal updates across the iframe boundary.
-
-## TYPE SIGNATURE
-
-```typescript
-import { Iframe } from 'solid-tom-ui';
-import { SolidComponent } from '@/type';
-
-<Iframe
-  element={SolidComponent}  // REQUIRED: a SolidJS component (not JSX, not an element — the component function itself)
-/>
-```
-
-### `SolidComponent` type (from `@/type`)
-```typescript
-type SolidComponent = Component<any> | (() => JSX.Element);
-```
-
-## INTERNAL BEHAVIOR
-- The iframe has class `size-full` (fills its parent container).
-- Mounting is deferred by `setTimeout(..., 200)` to wait for the iframe DOM to be ready.
-- The component is rendered via `render(props.element as () => Element, iframeDoc.body)`.
-
-## USAGE PATTERNS
-
-### Basic: render a component in an isolated iframe
-```tsx
-import { Iframe } from '@/components/iframe';
-import { MyWidget } from '@/components/my-widget';
-
-// Wrap in a sized container — Iframe fills 100% of its parent
-<div class="h-64 w-full border rounded">
-  <Iframe element={MyWidget} />
-</div>
-```
-
-### Render an inline arrow function component
-```tsx
-const PreviewContent = () => (
-  <div class="p-4 bg-base-100">
-    <p>This renders inside an iframe</p>
-  </div>
-);
-
-<div class="h-96 w-full">
-  <Iframe element={PreviewContent} />
-</div>
-```
-
-### Use case: component preview sandbox (e.g., documentation page)
-```tsx
-import { CodePreview } from '@/components/doc/CodePreview';
-import { Iframe } from '@/components/iframe';
-
-// Wrapping a preview inside Iframe ensures style isolation
-<div class="h-80 overflow-hidden rounded-lg border">
-  <Iframe element={() => <SomeExampleComponent />} />
-</div>
-```
-
-## CONSTRAINTS
-- **Pass the component function, NOT rendered JSX.** `element` expects a component reference or factory function, not `<MyWidget />`.
-  ```tsx
-  // ✅ Correct
-  <Iframe element={MyWidget} />
-  <Iframe element={() => <MyWidget someProp="value" />} />
-
-  // ❌ Wrong — passing already-rendered JSX
-  <Iframe element={<MyWidget />} />
-  ```
-- **Iframe fills its parent** via `size-full` (`width: 100%; height: 100%`). Always wrap it in a container with explicit dimensions.
-- **Mounting delay**: the component renders after ~200ms. Do not rely on immediate DOM availability.
-- **No scrollbars by default**: the iframe body inherits styles from the parent. Add `overflow: auto` to the rendered component if scrolling is needed.
-- **No cross-origin support**: this component only works for same-origin content (it directly accesses `contentDocument`).
-
-## ANTI-PATTERNS
-```tsx
-// ❌ No wrapper size — iframe renders but is invisible (0 height)
-<Iframe element={MyWidget} />
-
-// ✅ Always provide a sized wrapper
-<div class="h-64 w-full">
-  <Iframe element={MyWidget} />
-</div>
-
-// ❌ Passing JSX instead of component function
-<Iframe element={<MyWidget />} />
-
-// ✅ Pass component reference or factory
-<Iframe element={MyWidget} />
-<Iframe element={() => <MyWidget foo="bar" />} />
-```
-
-## DECISION RULES
-- Use `Iframe` when you need to render a SolidJS component in a visually isolated sandbox (e.g., live component previews, documentation demos, embedded widgets).
-- Do NOT use `Iframe` for external URLs — it only renders SolidJS components inside the iframe body.
-- For component demos in documentation, prefer wrapping with `<div class="h-[desired-height] w-full">` around `<Iframe>`.
----
-
-## Component Conventions
-
-> **CSS encoding**: internal CSS classes use short encoded names (e.g. `if01`, `if02`) per project convention.
-
-> **Unique IDs**: if this component needs to generate HTML `id` attributes, always use `createUniqueId()` from `solid-js` — never `Math.random()` or `Date.now()`.
+## COMPONENT IDENTITY
+- **Import**: `import { Iframe } from 'solid-tom-ui';`
+- **Export**: `Iframe` (named export)
+- **Framework**: SolidJS
+- **Purpose**: Renders a SolidJS component inside a sandboxed `<iframe>` — inherits parent styles, sets up event delegation, and preserves reactivity across the iframe boundary
+
+## PURPOSE
+Renders a SolidJS component inside a sandboxed `<iframe>` element while:
+1. Cloning all parent `<style>` and `<link rel="stylesheet">` tags into the iframe `<head>` so styles are inherited.
+2. Setting up SolidJS event delegation inside the iframe document (`click`, `mousedown`, `input`, `change`, `focus`, `blur`).
+3. Running the component under the parent's reactive owner context, preserving reactivity and signal updates across the iframe boundary.
+
+## TYPE SIGNATURE
+
+```typescript
+import { Iframe } from 'solid-tom-ui';
+import { SolidComponent } from '@/type';
+
+<Iframe
+  element={SolidComponent}  // REQUIRED: a SolidJS component (not JSX, not an element — the component function itself)
+/>
+```
+
+### `SolidComponent` type (from `@/type`)
+```typescript
+type SolidComponent = Component<any> | (() => JSX.Element);
+```
+
+## INTERNAL BEHAVIOR
+- The iframe has class `size-full` (fills its parent container).
+- Mounting is deferred by `setTimeout(..., 200)` to wait for the iframe DOM to be ready.
+- The component is rendered via `render(props.element as () => Element, iframeDoc.body)`.
+
+## USAGE PATTERNS
+
+### Basic: render a component in an isolated iframe
+```tsx
+import { Iframe } from '@/components/iframe';
+import { MyWidget } from '@/components/my-widget';
+
+// Wrap in a sized container — Iframe fills 100% of its parent
+<div class="h-64 w-full border rounded">
+  <Iframe element={MyWidget} />
+</div>
+```
+
+### Render an inline arrow function component
+```tsx
+const PreviewContent = () => (
+  <div class="p-4 bg-base-100">
+    <p>This renders inside an iframe</p>
+  </div>
+);
+
+<div class="h-96 w-full">
+  <Iframe element={PreviewContent} />
+</div>
+```
+
+### Use case: component preview sandbox (e.g., documentation page)
+```tsx
+import { CodePreview } from '@/components/doc/CodePreview';
+import { Iframe } from '@/components/iframe';
+
+// Wrapping a preview inside Iframe ensures style isolation
+<div class="h-80 overflow-hidden rounded-lg border">
+  <Iframe element={() => <SomeExampleComponent />} />
+</div>
+```
+
+## CONSTRAINTS
+- **Pass the component function, NOT rendered JSX.** `element` expects a component reference or factory function, not `<MyWidget />`.
+  ```tsx
+  // ✅ Correct
+  <Iframe element={MyWidget} />
+  <Iframe element={() => <MyWidget someProp="value" />} />
+
+  // ❌ Wrong — passing already-rendered JSX
+  <Iframe element={<MyWidget />} />
+  ```
+- **Iframe fills its parent** via `size-full` (`width: 100%; height: 100%`). Always wrap it in a container with explicit dimensions.
+- **Mounting delay**: the component renders after ~200ms. Do not rely on immediate DOM availability.
+- **No scrollbars by default**: the iframe body inherits styles from the parent. Add `overflow: auto` to the rendered component if scrolling is needed.
+- **No cross-origin support**: this component only works for same-origin content (it directly accesses `contentDocument`).
+
+## ANTI-PATTERNS
+```tsx
+// ❌ No wrapper size — iframe renders but is invisible (0 height)
+<Iframe element={MyWidget} />
+
+// ✅ Always provide a sized wrapper
+<div class="h-64 w-full">
+  <Iframe element={MyWidget} />
+</div>
+
+// ❌ Passing JSX instead of component function
+<Iframe element={<MyWidget />} />
+
+// ✅ Pass component reference or factory
+<Iframe element={MyWidget} />
+<Iframe element={() => <MyWidget foo="bar" />} />
+```
+
+## DECISION RULES
+- Use `Iframe` when you need to render a SolidJS component in a visually isolated sandbox (e.g., live component previews, documentation demos, embedded widgets).
+- Do NOT use `Iframe` for external URLs — it only renders SolidJS components inside the iframe body.
+- For component demos in documentation, prefer wrapping with `<div class="h-[desired-height] w-full">` around `<Iframe>`.
+---
+
+## Component Conventions
+
+> **CSS encoding**: internal CSS classes use short encoded names (e.g. `if01`, `if02`) per project convention.
+
+> **Unique IDs**: if this component needs to generate HTML `id` attributes, always use `createUniqueId()` from `solid-js` — never `Math.random()` or `Date.now()`.