@wix/ditto-codegen-public 1.0.217 → 1.0.219

package/dist/out.js

@@ -75693,15 +75693,24 @@ var require_load_examples = __commonJS({
           ]
         }
       },
-      InventoryCountdown: {
-        path: "inventory-countdown",
-        description: "A site plugin that displays real-time inventory countdown for products, showing stock levels and urgency messaging to encourage purchases",
+      ReactBuilder: {
+        path: "react-builder",
+        description: "A React builder component with all builder features",
         files: {
           [types_1.ExtensionType.SITE_COMPONENT]: [
-            "inventory-countdown/src/site/plugins/custom-elements/stock-counter/plugin.tsx",
-            "inventory-countdown/src/site/plugins/custom-elements/stock-counter/plugin.module.css",
-            "inventory-countdown/src/site/plugins/custom-elements/stock-counter/panel.tsx",
-            "inventory-countdown/src/site/plugins/custom-elements/stock-counter/consts.ts"
+            "react-builder/component.tsx",
+            "react-builder/style.css",
+            "react-builder/manifest.json",
+            "react-builder/types.ts",
+            "react-builder/components/Badge.tsx",
+            "react-builder/components/Button.tsx",
+            "react-builder/components/Counter.tsx",
+            "react-builder/components/FeaturedImage.tsx",
+            "react-builder/components/index.ts",
+            "react-builder/components/SocialLinks.tsx",
+            "react-builder/components/Subtitle.tsx",
+            "react-builder/components/Tags.tsx",
+            "react-builder/components/Title.tsx"
           ]
         }
       },
@@ -75791,7 +75800,7 @@ var require_load_examples = __commonJS({
       ],
       [types_1.ExtensionType.EMBEDDED_SCRIPT]: [appsExamples.CouponPopup],
       [types_1.ExtensionType.SERVICE_PLUGIN]: [appsExamples.SPISExample],
-      [types_1.ExtensionType.SITE_COMPONENT]: [appsExamples.InventoryCountdown],
+      [types_1.ExtensionType.SITE_COMPONENT]: [appsExamples.ReactBuilder],
       [types_1.ExtensionType.SITE_WIDGET]: [appsExamples.CustomElementWidget],
       [types_1.ExtensionType.BACKEND_EVENT]: [
         appsExamples.ProductCreatedLogger,
@@ -91352,32 +91361,563 @@ var require_site_component_instructions = __commonJS({
     exports2.siteComponentInstructions = void 0;
     var typescript_quality_guidelines_1 = require_typescript_quality_guidelines();
     var siteComponentRole = "You are a senior Wix CLI App Developer and React expert. Your job is to produce a beautiful, production\u2011quality site component quickly and correctly.";
-    var siteComponentImplementationGuidelines = `<rules>
-    - Return ONLY a JSON object matching the schema { path, content, type } (no prose, no markdown)
-    - type must be "typescript"; content must be the COMPLETE file source
-    - Do NOT add dependencies; do NOT use @wix/design-system or @wix/wix-ui-icons-common
-    - Do NOT invent types/modules/props; use only what exists in the scaffold and standard libs
-    </rules>
+    var coreDocumentation = `Wix Component Model: Contract between implementation (React, CSS) and Wix ecosystem, enabling users to:
+
+- Interact with inner elements (selection, removal)
+- Edit component style and props
+
+This contract is the "Component Manifest".`;
+    var dataTypesDocumentation = `Data types for storage in the Wix system:
+
+- **text**: Simple text value
+- **textEnum**: Predefined textual values to choose from
+- **number**: Any number
+- **booleanValue**: true/false value
+- **a11y**: Object with selected A11Y fields
+- **link**: Wix Link object
+- **image**: Wix Image object
+- **video**: Wix Video object
+- **vectorArt**: Wix Sanitized Vector Art object
+- **localDate**: ISO-8601 local date (YYYY-MM-DD)
+- **localTime**: ISO-8601 local time (hh:mm[:ss][.sss])
+- **webUrl**: URL with http/https scheme
+- **richText**: HTML text with inline CSS styling
+- **arrayItems**: Array type of data
+- **direction**: HTML dir attribute direction
+- **menuItems**: Array of menu items
+
+### DataItem Fields
+
+- dataType (DataType): Type of data being configured
+- displayName (string): Display name, max 100 chars
+- text (Text): Limitations on text input (maxLength, minLength, pattern)
+- textEnum (TextEnum): Required list of options with value and displayName
+- number (Number): Restrictions (minimum, maximum, multipleOf)
+- link (Link): Link support definition with linkTypes array
+- arrayItems (ArrayItems): Array data type definition
+- richTextAbilities (RichTextAbilities[]): Rich text formatting abilities
+
+### Link Types
+externalLink, anchorLink, emailLink, phoneLink, dynamicPageLink, pageLink, whatsAppLink, documentLink, popupLink, addressLink, edgeAnchorLinks, loginToWixLink
+
+### RichText Abilities
+font, fontFamily, fontSize, fontStyle, fontWeight, textDecoration, color, backgroundColor, letterSpacing, textAlign, direction, marginStart, marginEnd, bulletedList, numberedList, seoTag
+
+### Example: ArrayItems with Complex Objects
+\`\`\`json
+{
+  "dataType": "arrayItems",
+  "displayName": "Feature List",
+  "arrayItems": {
+    "data": {
+      "items": {
+        "title": { "dataType": "text", "displayName": "Title" },
+        "description": { "dataType": "text", "displayName": "Description" },
+        "icon": { "dataType": "vectorArt", "displayName": "Icon" }
+      }
+    },
+    "maxSize": 6
+  }
+}
+\`\`\`
 
-    <style_guidelines>
-    - Prefer simple, elegant UI using inline styles (no CSS imports)
-    - Use semantic HTML and accessible patterns (aria-*, roles, focus styles)
-    - Favor flex layouts, spacing, readable typography; avoid visual clutter
-    - Keep responsiveness lightweight (flex/wrap/percentages); avoid heavy logic
-    </style_guidelines>
+### Example: Link with Types
+\`\`\`json
+{
+  "dataType": "link",
+  "displayName": "Button Link",
+  "link": { "linkTypes": ["externalLink", "pageLink"] }
+}
+\`\`\``;
+    var cssPropertiesDocumentation = `CSS Properties are defined as a map of cssPropertyKey to css-property-item in the manifest.
+
+### CSS Property Item Fields
+- displayName (string): Display name, max 100 chars
+- defaultValue (Value): Default CSS value
+- display (Display): Options for display property with displayValues array
+
+### Display Values
+none, block, inline, flow, flowRoot, table, flex, grid, list_item, contents, inline_block, inline_table, inline_flex, inline_grid
+
+**Multi-word values use underscores**: inline_flex, inline_block, inline_grid, flow_root, list_item
+
+### CSS Shorthand Properties
+- border: Derives borderWidth, borderStyle, borderColor, and all directional variants
+- background: Derives backgroundColor, backgroundImage, backgroundSize, etc.
+- margin: Derives marginTop, marginRight, marginBottom, marginLeft
+- padding: Derives paddingTop, paddingRight, paddingBottom, paddingLeft
+- font: Derives fontFamily, fontSize, fontWeight, fontStyle, lineHeight
+- borderRadius: Derives all corner radius variants
+
+### Common CSS Property Types
+backgroundColor, color, font, padding, margin, border, borderRadius, boxShadow, opacity, display, gap, width, height, maxWidth, maxHeight, textAlign, flexDirection, alignItems, justifyContent, objectFit`;
+    var editorElementDocumentation = `The editor element defines element behaviors in the editor and the element tree.
+
+### Main Properties
+- **selector** (string): Direct className from React (e.g., className="my-component" \u2192 "selector": ".my-component"). One class only\u2014no compound (.a.b) or descendant (.a .b) selectors. Min 4, max 50 chars
+- **displayName** (string): Human friendly name on editor stage. Min 4, max 20 chars
+- **cssProperties** (map): CSS-API of this element
+- **data** (map): Data-API of this element, manifested as props
+- **elements** (map): Map of inner-elements with editor behavior definitions
+- **layout** (Layout): Layout capabilities of the component
+- **archetype** (Archetype): Component archetype for AI model classification
+
+### Archetype Options
+Button, LoginButton, Image, Gallery, Video, Audio, Text, TextInput, RichTextEditor, SignatureInput, Checkbox, RadioGroup, Switch, Dropdown, DatePicker, TimePicker, Ratings, RatingInput, Menu, Pagination, Slider, Container, Carousel, Accordion, Tabs, ProgressBar, Upload, Social, Breadcrumbs, SearchBox, Map, Line, Logo, Avatar, Captcha, VectorArt, AnimatedGraphic, Cart, ContactForm`;
+    var layoutDocumentation = `Layout capabilities define how the component can be resized and positioned.
+
+### EditorElementLayout Fields
+- **resizeDirection**: horizontal, vertical, horizontalAndVertical, aspectRatio
+- **contentResizeDirection**: horizontal, vertical, horizontalAndVertical, none
+- **disableStretching** (boolean): Prevent stretch capability
+- **disablePositioning** (boolean): Prevent free positioning
+- **disableRotation** (boolean): Prevent rotation capability`;
+    var elementsDocumentation = `Elements define the structure and behavior of nested components in the editor.
+
+### ElementItem
+- elementType: always use "inlineElement"
+- inlineElement (InlineElement): Element definition
+
+### InlineElement Fields
+- selector (string): Direct className from React, 4-50 chars
+- displayName (string): Human friendly name, 4-20 chars
+- cssProperties (map): CSS-API of this element
+- data (map): Data API of this element
+- elements (map): Map of inner elements
+- behaviors (Behaviors): Editor behaviors
+- archetype (Archetype): Component archetype
+
+### Behaviors
+- selectable (bool): true
+- removable (bool): true
+
+**CRITICAL**: Always set selectable: true and removable: true for all elements.`;
+    var propsDocumentation = `### Standard Props (always present)
+- **className** (string): CSS classes for styling - MUST be applied to root element
+- **id** (string): Unique identifier - MUST be applied to root element
+- **wix** (Wix): Wix system props including elementsRemovalState
+
+### wix.elementsRemovalState
+Contains keys of removed elements. Any element marked as REMOVED should not be rendered.
+\`\`\`typescript
+type REMOVED = 'REMOVED';
+interface Wix { elementsRemovalState?: Record<string, REMOVED> }
+\`\`\`
 
-    <engineering_guidelines>
-    - Implement a functional React + TypeScript component with a typed Props interface
-    - Keep the component small, pure, and readable; remove dead code/unused imports
-    - Use React hooks where needed; avoid unnecessary re-renders
-    - Name things clearly; avoid magic numbers; extract tiny helpers if it improves clarity
-    </engineering_guidelines>
+### elementProps (nested element data)
+When manifest defines \`elements\` with \`data\`, props appear in elementProps namespace:
+\`\`\`typescript
+interface elementProps {
+  [dataKey: string]: DataType;           // Data items from element
+  elementProps?: Record<string, elementProps>;  // Nested child elements
+  wix?: Wix;                              // Element-level removal state
+}
+\`\`\`
 
-    ${typescript_quality_guidelines_1.typescriptQualityGuidelines}
-`;
+Example with nested elements:
+\`\`\`typescript
+interface CardProps {
+  className: string;
+  id: string;
+  wix?: Wix;
+  elementProps: {
+    imageWrapper?: {
+      image: Image;
+      elementProps?: {
+        badge?: { badgeText: Text };
+      };
+    };
+    contentArea?: {
+      elementProps?: {
+        title?: { titleText: Text };
+        button?: { buttonText: Text; buttonLink: Link };
+      };
+    };
+  };
+}
+\`\`\`
+
+### Data Type Runtime Values
+- **text**: string
+- **textEnum**: string (selected value)
+- **number**: number
+- **booleanValue**: boolean
+- **link**: { href: string; target?: string; rel?: string }
+- **image**: { uri: string; url: string; name?: string; alt?: string; width?: number; height?: number }
+- **richText**: string (HTML with inline CSS)
+- **arrayItems**: Array<DataType | Record<string, DataType>>`;
+    var componentElementsGuidelines = `**CRITICAL - One Element = One Manifest Entry**:
+Each distinct visual part = separate manifest element. NEVER group multiple interactive items.
+
+Examples:
+- 3 buttons \u2192 3 separate elements (NOT 1 "buttons" element)
+- Image + text \u2192 2 separate elements (NOT 1 "hero" element)
+
+**WHY**: Users edit each independently. Different text, links, styling per item.
+
+### Top Level Rules
+
+**CRITICAL - Data Scoping**:
+- **editorElement.data** - ONLY component-wide behavior/layout config, NEVER inner elements content
+  - \u2713 Config: Layout enums, numbers (columns: 3, speed: 500)
+  - \u2717 NEVER: Text, links, images that belong to elements
+  - \u2717 NEVER: show... booleans (use removable: true on elements instead)
+- **elements[key].data** - Content for THAT element
+  - \u2713 Element-specific: title text, button link, image, price, description
+
+**editorElement.cssProperties** - ONLY container, NEVER child CSS:
+- \u2713 Container styles (backgroundColor, padding, gap)
+- \u2717 Child CSS (goes in element's own cssProperties)
+
+**Display CSS** (required in manifest): "display": { "display": { "displayValues": ["none", "block"] } }`;
+    var componentManifestGuidelines = `Manifest = contract between component and Wix. More detail = more configurable.
+
+**CRITICAL - Three-Way Synchronization**: Manifest MUST match React/CSS exactly:
+
+- React prop names \u2194 manifest data keys
+- React classNames \u2194 CSS selectors \u2194 manifest selectors
+  - Each manifest selector = direct className from React element
+  - React: className="product-card__badge" \u2192 Manifest: "selector": ".product-card__badge"
+  - NOT descendant paths (\u2717 .parent .child)
+- CSS defaults \u2194 manifest cssProperties defaultValue
+
+**Rules**:
+- Max editability (expose all content)
+- Data VS CSS properties: anything that can be defined in css should be exposed in the manifest via css properties, never data
+- Adhere to length constraints
+- Whenever the component has repeated data (e.g. lists, collections), ALWAYS use the "arrayItems" data type`;
+    var componentReactGuidelines = `### General Instructions
+- Import ./style.css, pure function, SSR-safe (no browser APIs at module scope, guard hooks)
+- Apply className and id to root: \`<div className={\`my-component \${className}\`} id={id}>\`
+- Top-level className MUST match manifest editorElement.selector
+- Pattern: \`className={\`base \${className}\`}\` where base = selector without dot
+- Sync with manifest (see Component Manifest Guidelines)
+- Component MUST react to prop changes. If state is initialized from props, update it when props change using useEffect with prop dependencies. Never ignore prop updates
+- Conditionally render ALL elements per wix.elementsRemovalState (all removable)
+- **All user-facing content must come from props** - text, media, links, labels, arrays should be controlled by manifest data
+- Hardcoded values are ONLY for fallback defaults when props are undefined
+- Links/media from manifest only, never hardcode URLs
+- Map a11y to DOM attributes, declare types at top, include wix prop
+- Default export, no TS errors/unused vars/TODOs
+- Code must compile and pass linting on first try
+
+### Component Hierarchy
+Three component types based on their role:
+
+**1. Leaf Components** - Render content only, no children:
+\`\`\`ts
+type LeafComponent<TProps> = (props: TProps & { className: string }) => React.JSX.Element;
+\`\`\`
+
+**2. Container Components** - Render child sub-components:
+\`\`\`ts
+type ContainerComponent<TProps> = (
+  props: TProps & {
+    className: string;
+    elementProps?: Record<string, any>;
+    wix?: Wix;
+  }
+) => React.JSX.Element;
+\`\`\`
+
+**3. Root Component** - The exported default, receives all builder props:
+\`\`\`ts
+type RootComponent<TProps> = (
+  props: TProps & {
+    id?: string;
+    className: string;
+    elementProps?: Record<string, any>;
+    wix?: Wix;
+  }
+) => React.JSX.Element;
+\`\`\`
+
+### Sub-Component Pattern for Nested Elements
+Extract every distinct UI unit into a named sub-component at module scope. This includes:
+- **Manifest elements** - matching keys in manifest elements
+- **Logical units** - buttons, icons, controls, sections, or any reusable piece of JSX
+Never write inline JSX blocks for distinct UI pieces; always extract them into named components.
+
+1. Give it a unique **nickname** (valid CSS classname, matches manifest element key)
+2. Pass the nickname as \`className\`
+3. Create a separate function component for each element
+4. Pass data props to components with single spread: \`{...elementProps?.['childKey']}\`
+5. **Self-Contained Components**: Sub-components must be complete, self-contained units. Never wrap a sub-component with semantic elements that add behavior
+
+### Props & State
+1. Declare props according to manifest data structure
+2. Component MUST react to prop changes. If state is initialized from props, update via useEffect with prop dependencies
+3. **Default each field independently**, never the entire element object:
+   - **Primitive fields**: Use inline fallbacks: \`props?.badgeText || 'Default'\`
+   - **Complex fields**: Define default arrays props outside the component. Use props directly: \`(props?.items?.length > 0) ? props?.items : DEFAULT_ITEMS\` with optional chaining
+4. Create a typed props interface for each component - **ALL data props must be optional** (use \`?\`)
+5. If state is initialized from props, sync via useEffect:
+\`\`\`tsx
+const [value, setValue] = useState(props.initialValue);
+useEffect(() => { setValue(props.initialValue); }, [props.initialValue]);
+\`\`\`
+
+### Conditional Rendering
+- Conditionally render ALL elements per wix.elementsRemovalState (all removable)
+- Pattern: \`{!removalState['elementKey'] && <Element />}\` where \`removalState = wix?.elementsRemovalState || {}\`
+
+### Links & Media
+- **Links**: <a> for navigation, <button> for internal logic
+  - Pattern: \`link?.href || '#'\`, prevent default if \`!link?.href || link.href === '#'\`
+  - Example: \`<a href={link?.href || '#'} target={link?.target} rel={link?.rel} onClick={handleClick}>\`
+- **elementProps**: Props may be partial. Default EACH data field independently, never the entire element object
+  - Single data field: \`elementProps?.badge?.badgeText || 'Default'\`
+  - **Arrays**: Check length: \`(items?.length > 0) ? items : defaults\`, add safety: \`if (!item?.property) return null\`
+
+### TypeScript (Strict)
+- Valid TS, no compilation errors, no \`any\`
+- Type safety: Don't compare incompatible types (e.g. \`type Player = 'X' | 'O'\` vs \`'Draw'\` \u2192 expand type: \`type Winner = Player | 'Draw'\`)
+- Define interfaces for props/data, no any (prefer strict typing)
+
+### ESLint Rules
+1. No unused vars/params/imports (\`@typescript-eslint/no-unused-vars\`)
+2. No external images: \`img\` \`src\` not \`https://...\` (allowed: local imports, \`wixstatic.com\`, variables)
+3. SSR-safe: No \`window\`/\`document\` at module scope/constructor, guard browser APIs in \`useEffect\`/handlers
+4. No \`dangerouslySetInnerHTML\` or inline \`<style>\` tags - use CSS variables or inline \`style\` prop for dynamic values
+5. No \`window.fetch\` (\`no-restricted-properties\`)
+6. Hooks (\`exhaustive-deps\`): ALL values from component scope used inside \`useEffect\`/\`useCallback\` MUST be in dependency array
+  - Functions used in \`useEffect\`: declare inside the hook and wrap in \`useCallback\`, or include in dependency array
+  - Event handlers (e.g., \`handleMouseMove\`, \`handleClick\`) used in effects MUST be wrapped in \`useCallback\` or included in dependency array
+  - Props/state/functions from component scope must be in dependency array
+  - Example: \`const handler = useCallback(() => {...}, [dep1, dep2]); useEffect(() => { el.addEventListener('event', handler); }, [handler]);\`
+7. Use \`const\`/\`let\` (no \`var\`), no unknown JSX properties`;
+    var componentCssGuidelines = `### CSS Guidelines
+- **No inline styles for static values** - use CSS classes instead. Inline styles allowed ONLY for JS-computed dynamic values
+- Sync with manifest (see Component Manifest Guidelines)
+- Each selector once only, \`box-sizing: border-box\` all elements
+- NO \`transition: all\`, NO media queries (except \`prefers-reduced-motion\`)
+- Root display: Declare \`--display: [value]\` CSS variable, then use \`display: var(--display)\` on root element
+- ALWAYS use \`pointer-events: auto\` on elements defined in manifest (editorElement or nested) or any selectors targeting them
+
+### Responsive Design
+Components live in user-resizable bounding boxes (300-1200px) within varying viewports (375-1920px).
+
+**CSS Approach**: Rely on modern CSS (flexbox, grid, \`clamp()\` for typography, \`min()\`, \`max()\`) for fluid responsiveness without media queries.
+
+**Layered Strategy**:
+- **Layout structure** (Container): \`grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))\` or \`flex-wrap: wrap\`
+- **Typography** (Viewport): \`clamp()\` for fluid typography
+- **Spacing**: Fixed or tight clamp spacing (\u226450% variation)
+- **Root element**: \`width: 100%; height: 100%\`
+
+**Component Types**:
+- Most (cards, forms): \`width: 100%\`, grid/flex, fixed spacing
+- Overlays (modals): Can have \`max-width\`, fixed dimensions
+- Readable content: \`width: 100%\` root, \`max-width\` inner wrapper`;
+    var designGuidelines = `### 1. Spacing as Communication
+Spacing communicates relationships and hierarchy\u2014not decoration.
+
+**Semantic Roles**:
+- **Padding**: Internal breathing room. Prevents cramped layouts
+- **Gap**: Relationship indicator. Consistent gaps = visual unity
+- **Margin**: Section separation. Clear boundaries between major blocks
+- **Whitespace**: Focus amplifier. Strategic emptiness = premium feel
+
+**Spacing Scale**:
+| Relationship | Value | Use Case |
+|---|---|---|
+| Tight (icon + label) | 0.25-0.5rem (4-8px) | Clustering related items |
+| Same category | 1-1.5rem (16-24px) | Card sections, form fields |
+| Different sections | 2-3rem (32-48px) | Major content blocks |
+| Emphasis/Drama | 4rem+ (64px+) | Hero content, luxury feel |
+
+**Generous Whitespace Examples**: 1.5rem/24px, 2rem/32px, 2.5rem/40px create sophistication and clarity. Design clean, spacious layouts that breathe.
+
+### 2. Alignment as Intent
+Every alignment choice must support comprehension and flow\u2014never default.
+
+**Principles**: Proximity (group related), Consistency (same pattern for same type), Balance (distribute visual weight), Scanability (guide the eye).
+
+| Element Type | Horizontal | Vertical |
+|---|---|---|
+| Body text, lists | Left | Top |
+| Headlines, CTAs | Center | Center |
+| Metadata, timestamps | Right | \u2014 |
+| Form inputs | Stretch | \u2014 |
+
+### 3. Layout Patterns
+Choose the pattern that serves the component's purpose\u2014don't default to the first idea.
+
+| Pattern | When to Use | Spacing Strategy | Best For |
+|---|---|---|---|
+| **Single-Column** | Simple, focused (hero, single CTA) | Generous vertical gaps (2-3rem) | Focused actions, mobile-first |
+| **Two-Column Split** | Contrasting content (image + text) | Balance weight with whitespace | Product cards, profiles |
+| **Grid/Multi-Column** | Repeating items (galleries, cards) | Consistent gaps, subtle depth | Collections, dashboards |
+| **Stacked + Emphasis** | Primary + metadata (pricing) | Large top element, smaller secondary | Pricing, announcements |
+
+### 4. Visual Consistency
+All similar elements must share the same visual DNA.
+
+**Corner Radius**:
+- Sharp (0-4px): Editorial, Luxury, Technical
+- Rounded (6-12px): Contemporary, Professional [DEFAULT]
+- Rule: All buttons same radius, all cards same radius, all inputs same radius
+
+**Shadow Levels (max 3)**:
+- Rest: \`0 1px 2px rgba(0,0,0,0.05)\`
+- Hover: \`0 4px 12px rgba(0,0,0,0.08)\`
+- Floating: \`0 8px 24px rgba(0,0,0,0.12)\`
+
+**Borders**: Consistent weight (all 1px or all 2px). Don't mix styles.
+**Element Heights**: All primary buttons same height, all inputs same height.
+
+### 5. Color Strategy
+Color creates hierarchy, zones, and rhythm\u2014not just decoration.
+
+**Token Usage**:
+- **Backgrounds**: Use accent tints (accent-3, accent-4) for section backgrounds, base-1 for primary
+- **Depth**: Mid-tone shades for layering, subtle background shifts for distinction
+- **Emphasis**: Vibrant accents (accent-1, accent-2) for CTAs, highlights, focus states
+- **Text**: High contrast for readability. Primary on base, secondary with reduced opacity or shade
+
+**Principles**:
+- Embrace the full palette\u2014don't limit to monochromatic unless context demands it
+- Create visual interest through color variety
+- Use color purposefully for hierarchy and zones, not decoration
+- Ensure sufficient contrast (WCAG AA minimum)
+
+### 6. Typography as Structure
+Typography creates hierarchy without relying on color.
+
+**Font Selection & Pairing Principles**:
+1. **Establish Clear Hierarchy**: Use font size and weight to create visual hierarchy
+2. **Maintain Consistency**: Apply font stack and sizing scale consistently
+3. **Anchor & Pair**: Pair fonts that complement each other
+
+**Hierarchy Rules**:
+- Max 3 levels per component
+- Size contrast: Headlines 1.5-2x body size minimum
+- Weight contrast: 700 for emphasis, 400-500 for body
+
+**Legibility**:
+- Line-height: 1.5-1.7 (body), 1.1-1.3 (headings)
+- Line length: 45-75 characters (optimal readability)
+- Avoid orphans (no single word on final line)
+
+### 7. Motion System
+All animations: pure CSS, smooth, purposeful.
+
+**Timing**:
+| Interaction | Duration | Easing |
+|---|---|---|
+| Hover, click | 150-200ms | \`ease-out\` |
+| Active states | 250ms | \`ease-out\` |
+| Content reveals | 400-500ms | \`ease-out\` or \`cubic-bezier(0.34, 1.56, 0.64, 1)\` (spring) |
+
+**Standard Reveal Animation**:
+\`\`\`css
+@keyframes contentAppear {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+\`\`\`
+
+**Rules**:
+- Only animate \`transform\` and \`opacity\` (GPU-accelerated)
+- Respect \`prefers-reduced-motion\` (only allowed media query)
+- No looping (except loading spinners)
+
+### 8. Creative Exploration
+**Push beyond the obvious**. Award-winning design comes from exploring multiple creative directions.
+
+**Trigger Questions**:
+1. "What are 3 different layout approaches for this?" \u2192 Sketch mentally before choosing
+2. "What would make a user say 'wow'?" \u2192 Aim for delight, not just function
+3. "How can proportion create interest?" \u2192 Vary sizes, use asymmetry intentionally
+4. "What interaction details would feel polished?" \u2192 Hover states, micro-animations
+
+**Pattern Ideas**:
+- **Cards**: Asymmetric grids (60/40 split), overlapping elements with z-index, thick accent border (3-4px) on one side, color blocking backgrounds, typography-first (massive headline as anchor)
+- **Lists & Collections**: Alternating styles (bordered vs shadow), spotlight pattern (every 3rd item larger), color rhythm (alternating backgrounds), horizontal scroll with varied widths
+- **Interactive Elements**: Split buttons (action + dropdown), icons in colored circles, progress with color transitions, large toggles with smooth transitions
+- **Content Hierarchy**: Large numbers (3-4x size for stats), quote callouts (thick left border + tinted background), whitespace as divider (4rem+), pill badges (tight padding, accent background)
+- **Spacing Drama**: Don't be shy\u2014use 40-64px padding for hero sections. Tight clustering (4-8px) + huge gaps (40px+) between groups. Asymmetric margins (24px top, 40px bottom)
+
+### 9. Forbidden Patterns (Anti-LLM-Default)
+**Never use these unless explicitly requested**:
+- Generic shadows: \`box-shadow: 0 2px 4px rgba(0,0,0,0.1)\` \u2192 Use the shadow levels above
+- Default browser outlines \u2192 Implement custom accessible focus states
+- Decorative accent lines above titles \u2192 Use whitespace and typography instead
+- Emojis or decorative shapes \u2192 Avoid unless core to request
+- Looping animations \u2192 Only for loading states
+- Center-aligned multi-line body text \u2192 Hard to read`;
+    var responseFormat = `Output as JSON with files array containing:
+1. **manifest.json** - Component manifest (JSON) containing:
+   - editorElement: full editor element configuration (selector, displayName, archetype, layout, cssProperties, data, elements, behaviors)
+2. **component.tsx** - React component implementation
+3. **style.css** - CSS styles
+4. **types.ts** - TypeScript type definitions
+
+Each file: { path: string, content: string, operation: "insert" }
+
+### manifest.json Structure Example:
+\`\`\`json
+{
+  "editorElement": {
+    "selector": ".component-name",
+    "displayName": "Component Name",
+    "archetype": "Container",
+    "layout": { ... },
+    "cssProperties": { ... },
+    "elements": { ... }
+  }
+}
+\`\`\`
+
+**NEVER ask questions or clarifications, when in doubt make assumptions.**`;
+    var assetGuidelines = `### Image Asset Requirements
+**Format**:
+\`\`\`
+<imageUrlName>
+{ "description": "...", "width": number, "height": number }
+</imageUrlName>
+\`\`\`
+
+**Rules**:
+- Import as named export from \`'./assets/defaultImages'\`
+- XML tag name matches imported variable name
+- Width/height: multiples of 64, between 128-2048px
+- NEVER use external URLs
+
+**Example**:
+\`\`\`tsx
+import { heroImage } from './assets/defaultImages'
+;<img src={heroImage} alt="Hero" />
+\`\`\`
+
+\`\`\`
+<heroImage>
+{ "description": "Modern cityscape at sunset with glass buildings reflecting golden light", "width": 1920, "height": 1088 }
+</heroImage>
+\`\`\``;
+    var hardConstraints = `- Return ONLY a JSON object with files array (no prose, no markdown)
+- Each file: { path, content, operation } where operation is "insert" for new files
+    - Do NOT add dependencies; do NOT use @wix/design-system or @wix/wix-ui-icons-common
+    - Do NOT invent types/modules/props; use only what exists in the scaffold and standard libs
+- NEVER ask questions or clarifications, when in doubt make assumptions`;
     exports2.siteComponentInstructions = {
       role: siteComponentRole,
-      implementationGuidelines: siteComponentImplementationGuidelines
+      coreDocumentation,
+      dataTypes: dataTypesDocumentation,
+      cssProperties: cssPropertiesDocumentation,
+      editorElement: editorElementDocumentation,
+      layout: layoutDocumentation,
+      elements: elementsDocumentation,
+      props: propsDocumentation,
+      componentElementsGuidelines,
+      manifestGuidelines: componentManifestGuidelines,
+      reactGuidelines: componentReactGuidelines,
+      cssGuidelines: componentCssGuidelines,
+      designGuidelines,
+      assetGuidelines,
+      responseFormat,
+      hardConstraints,
+      typescriptQualityGuidelines: typescript_quality_guidelines_1.typescriptQualityGuidelines
     };
   }
 });
@@ -91397,7 +91937,7 @@ var require_site_component_prompt = __commonJS({
         apiDocumentation,
         useData,
         useIteration
-      }).withRole(site_component_instructions_1.siteComponentInstructions.role).withImplementationGuidelines(site_component_instructions_1.siteComponentInstructions.implementationGuidelines);
+      }).withRole(site_component_instructions_1.siteComponentInstructions.role).withSection("core_documentation", site_component_instructions_1.siteComponentInstructions.coreDocumentation).withSection("data_types", site_component_instructions_1.siteComponentInstructions.dataTypes).withSection("css_properties", site_component_instructions_1.siteComponentInstructions.cssProperties).withSection("editor_element", site_component_instructions_1.siteComponentInstructions.editorElement).withSection("layout", site_component_instructions_1.siteComponentInstructions.layout).withSection("elements", site_component_instructions_1.siteComponentInstructions.elements).withSection("props", site_component_instructions_1.siteComponentInstructions.props).withSection("component_elements_guidelines", site_component_instructions_1.siteComponentInstructions.componentElementsGuidelines).withSection("manifest_guidelines", site_component_instructions_1.siteComponentInstructions.manifestGuidelines).withSection("react_guidelines", site_component_instructions_1.siteComponentInstructions.reactGuidelines).withSection("css_guidelines", site_component_instructions_1.siteComponentInstructions.cssGuidelines).withSection("design_guidelines", site_component_instructions_1.siteComponentInstructions.designGuidelines).withSection("asset_guidelines", site_component_instructions_1.siteComponentInstructions.assetGuidelines).withSection("response_format", site_component_instructions_1.siteComponentInstructions.responseFormat).withSection("hard_constraints", site_component_instructions_1.siteComponentInstructions.hardConstraints).withImplementationGuidelines(site_component_instructions_1.siteComponentInstructions.typescriptQualityGuidelines);
     };
     var siteComponentCorePrompt = () => {
       return createCoreBuilder({
@@ -105183,14 +105723,12 @@ var require_extensionGenerators = __commonJS({
           }
           case types_1.ExtensionType.SITE_COMPONENT: {
             const name = extension.name || "My Site Component";
-            const extensionConfig = this.createSiteComponentData(name, scaffoldDir, id);
-            return writeExtensionFile({
+            return writeSiteComponentExtensionFile({
               outputPath,
               name,
-              builderMethodName: "siteComponent",
-              extensionConfig,
               extensionType: extension.type,
-              scaffoldDir
+              scaffoldDir,
+              id
             });
           }
           case types_1.ExtensionType.SITE_WIDGET: {
@@ -105315,24 +105853,6 @@ var require_extensionGenerators = __commonJS({
           height: { defaultHeight: 500 }
         };
       }
-      static createSiteComponentData(name, scaffoldDir, id) {
-        const kebabCaseComponentName = (0, ditto_scaffolding_2.toKebabCase)(name);
-        const componentPath = getScaffoldPath(scaffoldDir, "component.tsx");
-        return {
-          id,
-          description: name,
-          type: `platform.builder.${id}`,
-          editorElement: {
-            displayName: name,
-            selector: kebabCaseComponentName
-          },
-          resources: {
-            client: {
-              componentUrl: componentPath
-            }
-          }
-        };
-      }
       static createEmbeddedScriptData(id, name, scaffoldDir, placement, scriptType) {
         const source = getScaffoldPath(scaffoldDir, "embedded.html");
         return {
@@ -105356,25 +105876,59 @@ var require_extensionGenerators = __commonJS({
     function getScaffoldPath(scaffoldDir, file) {
       return "./" + path_1.default.join(scaffoldDir, file).replace(/^src\//, "");
     }
-    function writeExtensionFile({ outputPath, name, builderMethodName, extensionConfig, extensionType, scaffoldDir }) {
+    function validateAndSanitizeName(name) {
       const sanitizedName = name.replace(/[^a-zA-Z0-9\s-_]/g, "").trim();
       if (!sanitizedName) {
         throw new ditto_codegen_types_12.ExtensionGenerationError(`Invalid extension name: "${name}"`, {
           extensionName: name
         });
       }
+      return sanitizedName;
+    }
+    function resolveAndValidateScaffoldPath(outputPath, scaffoldDir) {
       const absoluteScaffoldPath = path_1.default.isAbsolute(scaffoldDir) ? scaffoldDir : path_1.default.resolve(outputPath, scaffoldDir);
-      const filePath = path_1.default.join(absoluteScaffoldPath, "extensions.ts");
-      const relativePath = path_1.default.relative(outputPath, filePath);
-      const normalizedFilePath = path_1.default.resolve(filePath);
+      const normalizedScaffoldPath = path_1.default.resolve(absoluteScaffoldPath);
       const normalizedOutputPath = path_1.default.resolve(outputPath);
-      if (!normalizedFilePath.startsWith(normalizedOutputPath)) {
-        throw new ditto_codegen_types_12.ExtensionGenerationError(`Attempted to write extension file outside output path: ${filePath}`, { filePath });
+      if (!normalizedScaffoldPath.startsWith(normalizedOutputPath)) {
+        throw new ditto_codegen_types_12.ExtensionGenerationError(`Attempted to write files outside output path: ${absoluteScaffoldPath}`, { filePath: absoluteScaffoldPath });
       }
-      const tsContent = generateExtensionTsContent(builderMethodName, extensionConfig, extensionType, name);
-      fs_extra_1.default.outputFileSync(filePath, tsContent);
+      return absoluteScaffoldPath;
+    }
+    function writeExtensionsFile(outputPath, absoluteScaffoldPath, content) {
+      const extensionsFilePath = path_1.default.join(absoluteScaffoldPath, "extensions.ts");
+      const relativePath = path_1.default.relative(outputPath, extensionsFilePath);
+      fs_extra_1.default.outputFileSync(extensionsFilePath, content);
       return relativePath;
     }
+    function writeExtensionFile({ outputPath, name, builderMethodName, extensionConfig, extensionType, scaffoldDir }) {
+      validateAndSanitizeName(name);
+      const absoluteScaffoldPath = resolveAndValidateScaffoldPath(outputPath, scaffoldDir);
+      const tsContent = generateExtensionTsContent(builderMethodName, extensionConfig, extensionType, name);
+      return writeExtensionsFile(outputPath, absoluteScaffoldPath, tsContent);
+    }
+    function writeSiteComponentExtensionFile({ outputPath, name, extensionType, scaffoldDir, id }) {
+      validateAndSanitizeName(name);
+      const absoluteScaffoldPath = resolveAndValidateScaffoldPath(outputPath, scaffoldDir);
+      const componentPath = getScaffoldPath(scaffoldDir, "component.tsx");
+      const extensionName = generateUniqueExtensionName(extensionType, name);
+      const tsContent = `import { extensions } from '@wix/astro/builders';
+import manifest from './manifest.json';
+
+export const ${extensionName} = extensions.siteComponent({
+  ...manifest,
+  id: '${id}',
+  description: '${name}',
+  type: 'platform.builder.${id}',
+  resources: {
+    client: {
+      component: '${componentPath}',
+      componentUrl: '${componentPath}',
+    },
+  },
+});
+`;
+      return writeExtensionsFile(outputPath, absoluteScaffoldPath, tsContent);
+    }
     function generateExtensionTsContent(builderMethodName, extensionConfig, extensionType, name) {
       const extensionName = generateUniqueExtensionName(extensionType, name);
       const configString = (0, naturalJsonStringify_1.naturalJsonStringify)(extensionConfig);