@app-brew/brewery 1.0.0

package/src/types/src/blocks-definition/content.def.ts

@@ -0,0 +1,2051 @@
+import { z } from 'zod'
+import { baseStyleSchema, baseTextStyleSchema } from '../style'
+import { blockSchema } from '../common'
+import { BlockDefinition, BlockMicroContext } from './types'
+import {
+  accordionComponentCodeJson,
+  containerComponentCodeJson,
+  layoutSchema,
+  linkComponentCodeJson,
+  listComponentCodeJson,
+  verticalListComponentCodeJson,
+} from './common.def'
+
+/**
+ * Icon style schema
+ */
+const iconStyleSchema = z.object({
+  root: baseStyleSchema.optional(),
+  icon: z
+    .object({
+      width: z.number().optional(),
+      height: z.number().optional(),
+      fill: z.string().optional(),
+      stroke: z.string().optional(),
+      strokeWidth: z.number().optional(),
+    })
+    .optional(),
+})
+
+/**
+ * Button style schema
+ */
+const buttonStyleSchema = z.object({
+  root: baseStyleSchema.optional(),
+  text: baseTextStyleSchema.optional(),
+  startIcon: iconStyleSchema.optional(),
+  endIcon: iconStyleSchema.optional(),
+  kind: z.enum(['primary', 'secondary', 'tertiary']).optional(),
+  loader: z
+    .object({
+      root: baseStyleSchema.optional(),
+      indicator: z.object({ root: baseStyleSchema.optional() }).optional(),
+    })
+    .optional(),
+  states: z
+    .object({
+      disabled: z.object({ root: baseStyleSchema.optional() }).optional(),
+      active: z.object({ root: baseStyleSchema.optional() }).optional(),
+    })
+    .optional(),
+})
+
+/**
+ * Accordion style schema
+ */
+const accordionStyleSchema = z.object({
+  root: baseStyleSchema.optional(),
+  heading: z.object({ root: baseStyleSchema.optional() }).optional(),
+  headingExpanded: z.object({ root: baseStyleSchema.optional() }).optional(),
+  icon: iconStyleSchema.optional(),
+})
+
+/**
+ * Rich text style schema
+ */
+const richTextStyleSchema = z.object({
+  wrapper: baseStyleSchema.optional(),
+  root: baseStyleSchema.optional(),
+  tags: z
+    .object({
+      p: baseTextStyleSchema.optional(),
+      h1: baseTextStyleSchema.optional(),
+      h2: baseTextStyleSchema.optional(),
+      h3: baseTextStyleSchema.optional(),
+      h4: baseTextStyleSchema.optional(),
+      h5: baseTextStyleSchema.optional(),
+      h6: baseTextStyleSchema.optional(),
+      b: baseTextStyleSchema.optional(),
+      strong: baseTextStyleSchema.optional(),
+      i: baseTextStyleSchema.optional(),
+      em: baseTextStyleSchema.optional(),
+      a: baseTextStyleSchema.optional(),
+      ul: baseStyleSchema.optional(),
+      ol: baseStyleSchema.optional(),
+      li: baseTextStyleSchema.optional(),
+    })
+    .optional(),
+})
+
+/**
+ * YouTube video style schema
+ */
+const youtubeVideoStyleSchema = z.object({
+  root: baseStyleSchema.optional(),
+  thumbnailImage: baseStyleSchema.optional(),
+  playButton: z
+    .object({
+      width: z.number().optional(),
+      height: z.number().optional(),
+      fill: z.string().optional(),
+    })
+    .optional(),
+})
+
+/**
+ * Social signin style schema
+ */
+const socialSigninStyleSchema = z.object({
+  root: baseStyleSchema.optional(),
+  apple: baseStyleSchema.optional(),
+  google: baseStyleSchema.optional(),
+})
+
+/**
+ * List style schema
+ */
+const listStyleSchema = z.object({
+  root: baseStyleSchema.optional(),
+  flatList: z.object({ root: baseStyleSchema.optional() }).optional(),
+  list: baseStyleSchema.optional(),
+  item: baseStyleSchema.optional(),
+  oddItem: baseStyleSchema.optional(),
+  evenItem: baseStyleSchema.optional(),
+  columnWrapperStyle: baseStyleSchema.optional(),
+})
+
+/**
+ * Vertical list style schema
+ */
+const verticalListStyleSchema = z.object({
+  wrapper: baseStyleSchema.optional(),
+  root: baseStyleSchema.optional(),
+  list: baseStyleSchema.optional(),
+  item: baseStyleSchema.optional(),
+  separator: z.object({ root: baseStyleSchema.optional() }).optional(),
+  cell: baseStyleSchema.optional(),
+  cellInFirstRow: baseStyleSchema.optional(),
+  cellInFirstCol: baseStyleSchema.optional(),
+  rowSeparator: baseStyleSchema.optional(),
+  columnSeparator: baseStyleSchema.optional(),
+})
+
+/**
+ * Image source schema
+ */
+const imageSourceSchema = z.object({
+  src: z.string(),
+  width: z.number().optional(),
+  height: z.number().optional(),
+})
+
+/**
+ * Image style schema
+ */
+const imageStyleSchema = baseStyleSchema.extend({
+  aspectRatio: z.number().optional(),
+})
+
+/**
+ * Video source schema
+ */
+const videoSourceSchema = z.object({
+  src: z.object({
+    url: z.string(),
+    width: z.number().optional(),
+    height: z.number().optional(),
+    format: z.string().optional(),
+  }),
+})
+
+/**
+ * YouTube video source schema
+ */
+const youtubeVideoSourceSchema = z.object({
+  videoId: z.string(),
+  thumbnailUrl: z.string().optional(),
+  params: z.record(z.string(), z.any()).optional(),
+})
+
+/**
+ * Link config schema
+ */
+const linkConfigSchema = z.object({
+  kind: z.string(),
+  value: z.string(),
+  params: z.record(z.string(), z.any()).optional(),
+  external: z.boolean().optional(),
+})
+
+/**
+ * Link button source schema
+ */
+const linkButtonSourceSchema = z.object({
+  text: z.string(),
+})
+
+/**
+ * Link button options schema
+ */
+const linkButtonOptionsSchema = z.object({
+  link: linkConfigSchema.optional(),
+  startIcon: z.string().optional(),
+  endIcon: z.string().optional(),
+  disabled: z.boolean().optional(),
+  loading: z.boolean().optional(),
+  enableHapticTouch: z.boolean().optional(),
+  hapticTouchValue: z.enum(['impactHeavy', 'soft']).optional(),
+})
+
+/**
+ * Social signin options schema
+ */
+const socialSigninOptionsSchema = z.object({
+  successRedirectScreenId: z.string().optional(),
+  socialSigninProviders: z
+    .object({
+      ios: z.array(z.string()).optional(),
+      android: z.array(z.string()).optional(),
+    })
+    .optional(),
+})
+
+/**
+ * List options schema
+ */
+const listOptionsSchema = z.object({
+  itemGap: z.number().optional(),
+  horizontal: z.boolean().optional(),
+  itemPerRow: z.number().optional(),
+  columnGap: z.number().optional(),
+  fraction: z.number().optional(),
+})
+
+/**
+ * Accordion options schema
+ */
+const accordionOptionsSchema = z.object({
+  defaultExpanded: z.boolean().optional(),
+  collapseIcon: z.string().optional(),
+  expandIcon: z.string().optional(),
+})
+
+/**
+ * Component style schemas - maps component kind to its style schema
+ * Used for validation and type checking of component-specific styles
+ */
+const componentStyleSchema = z
+  .object({
+    wrapper: baseStyleSchema.optional(),
+    text: baseTextStyleSchema.optional(),
+    image: imageStyleSchema.optional(),
+    icon: iconStyleSchema.optional(),
+    'link-button': buttonStyleSchema.optional(),
+    'html-rich-text': richTextStyleSchema.optional(),
+    video: imageStyleSchema.optional(),
+    'youtube-video': youtubeVideoStyleSchema.optional(),
+    spacer: baseStyleSchema.optional(),
+    'social-signin': socialSigninStyleSchema.optional(),
+    accordion: accordionStyleSchema.optional(),
+    list: listStyleSchema.optional(),
+    'vertical-list': verticalListStyleSchema.optional(),
+    link: z.object({ root: baseStyleSchema.optional() }).optional(),
+    row: baseStyleSchema.optional(),
+    column: baseStyleSchema.optional(),
+  })
+  .partial()
+  .catchall(z.any())
+
+/**
+ * Component source schemas - maps component kind to its source schema
+ * Used for validation and type checking of component-specific source data
+ */
+const componentSourceSchema = z
+  .object({
+    text: z.union([z.string(), z.object({ text: z.string() })]).optional(),
+    image: imageSourceSchema.optional(),
+    icon: z.object({ iconId: z.string() }).optional(),
+    'link-button': linkButtonSourceSchema.optional(),
+    'html-rich-text': z.string().optional(),
+    video: videoSourceSchema.optional(),
+    'youtube-video': youtubeVideoSourceSchema.optional(),
+    spacer: z.any().optional(),
+    'social-signin': z.object({}).optional(),
+    link: linkConfigSchema.optional(),
+  })
+  .partial()
+  .catchall(z.any())
+
+/**
+ * Component options schemas - maps component kind to its options schema
+ * Used for validation and type checking of component-specific options
+ */
+const componentOptionsSchema = z
+  .object({
+    text: z
+      .object({
+        numberOfLines: z.number().optional(),
+        ellipsizeMode: z.enum(['head', 'middle', 'tail', 'clip']).optional(),
+        selectable: z.boolean().optional(),
+      })
+      .optional(),
+    image: z
+      .object({
+        aspectRatio: z.number().optional(),
+        resizeMode: z
+          .enum(['cover', 'contain', 'stretch', 'center'])
+          .optional(),
+        roundness: z.number().optional(),
+        autoHeight: z.boolean().optional(),
+      })
+      .optional(),
+    video: z
+      .object({
+        aspectRatio: z.number().optional(),
+        controls: z.boolean().optional(),
+      })
+      .optional(),
+    'youtube-video': z
+      .object({
+        thumbnailAspectRatio: z.number().optional(),
+        embedBaseUrl: z.string().optional(),
+        hidePlayButton: z.boolean().optional(),
+      })
+      .optional(),
+    'link-button': linkButtonOptionsSchema.optional(),
+    'social-signin': socialSigninOptionsSchema.optional(),
+    list: listOptionsSchema.optional(),
+    'vertical-list': z
+      .object({
+        itemGap: z.number().optional(),
+        numColumns: z.number().optional(),
+      })
+      .optional(),
+    accordion: accordionOptionsSchema.optional(),
+    link: z.object({ pressableProps: z.any().optional() }).optional(),
+  })
+  .partial()
+  .catchall(z.any())
+
+/**
+ * Content Block Schema
+ */
+const zodSchema = blockSchema.extend({
+  layout: layoutSchema,
+  source: componentSourceSchema,
+  style: componentStyleSchema,
+  options: componentOptionsSchema,
+})
+
+/**
+ * Component hierarchy for AI understanding
+ *
+ * The Content block is a flexible, dynamic layout system that renders a tree
+ * of components based on the layout configuration. It supports:
+ * - Container components (row, column) for layout structure
+ * - Base components (text, image, icon, etc.) for content
+ * - Special components (list, vertical-list, accordion, link) for complex layouts
+ */
+const codeJson = {
+  level: 0,
+  component: 'View',
+  stylePath: 'style.wrapper',
+  description:
+    'Root wrapper View container. All layout content is rendered inside this wrapper.',
+  usage: {
+    wrapper: 'style.wrapper - Applied to root View',
+  },
+  children: [
+    {
+      level: 1,
+      component: 'Dynamic Layout Tree',
+      layoutPath: 'layout',
+      sourcePath: 'source',
+      stylePath: 'style',
+      optionsPath: 'options',
+      description:
+        'Dynamic layout tree rendered recursively using getLayoutItem(). The entire structure is determined by the layout configuration. Each layout item has a "kind" and "key" - the kind determines the component type, the key is used to access source/style/options.',
+      usage: {
+        layout:
+          'settings.layout (normalized via normaliseLayout) - tree structure of { kind, key, children }',
+        source:
+          'settings.source (keyed by layout keys) - source[key] for each component',
+        style: 'style (keyed by layout keys) - style[key] for each component',
+        options:
+          'settings.options (keyed by layout keys) - options[key] for each component',
+        rendering:
+          'layoutRenderer() recursively processes layout tree, matching kind to component',
+      },
+      children: [
+        containerComponentCodeJson,
+        {
+          level: 2,
+          component: 'TextLayoutItem',
+          condition: 'layoutItem.kind === "text"',
+          description:
+            'Text component for displaying text. Accepts string or { text: string }.',
+          sourcePath: 'source[key]',
+          stylePath: 'style[key]',
+          optionsPath: 'options[key]',
+          usage: {
+            source: 'string | { text: string }',
+            style:
+              'BaseTextStyle (fontSize, fontWeight, color, lineHeight, etc.)',
+            options: 'TextProps (numberOfLines, ellipsizeMode, etc.)',
+          },
+        },
+        {
+          level: 2,
+          component: 'ImageLayoutItem',
+          condition: 'layoutItem.kind === "image"',
+          description:
+            'Image component supporting regular images, SVG files, and inline SVG. Uses "src" property (NOT "url").',
+          sourcePath: 'source[key]',
+          stylePath: 'style[key]',
+          optionsPath: 'options[key]',
+          usage: {
+            source: '{ src: string, width?: number, height?: number }',
+            style: 'BaseStyle with width, height, aspectRatio',
+            options: '{ aspectRatio, resizeMode, roundness, autoHeight }',
+          },
+          children: [
+            {
+              level: 3,
+              component: 'SvgXml',
+              condition: 'src.startsWith("<svg")',
+              description: 'Inline SVG rendered via SvgXml',
+            },
+            {
+              level: 3,
+              component: 'SvgUri',
+              condition: 'file extension is .svg',
+              description: 'SVG file rendered via SvgUri',
+            },
+            {
+              level: 3,
+              component: 'Image',
+              condition: 'regular image file',
+              description: 'Regular image rendered via Image component',
+            },
+          ],
+        },
+        {
+          level: 2,
+          component: 'Icon',
+          condition: 'layoutItem.kind === "icon"',
+          description: 'Icon component from icon registry.',
+          sourcePath: 'source[key]',
+          stylePath: 'style[key]',
+          optionsPath: 'options[key]',
+          usage: {
+            source: '{ iconId: string }',
+            style: 'BaseIconStyle (width, height, fill, stroke, strokeWidth)',
+            options: 'SvgProps',
+          },
+        },
+        {
+          level: 2,
+          component: 'HtmlRichTextLayoutItem',
+          condition: 'layoutItem.kind === "html-rich-text"',
+          description: 'Raw HTML renderer for simple HTML content.',
+          sourcePath: 'source[key]',
+          stylePath: 'style[key]',
+          optionsPath: 'options[key]',
+          usage: {
+            source: 'string (JSON stringified Shopify rich text)',
+            style:
+              '{ wrapper, root, tags: { p, h1, h2, h3, b, i, a, ul, ol, li } }',
+            options: '{ enableUserAgentStyles, ignoredDomTags }',
+          },
+        },
+        {
+          level: 2,
+          component: 'VideoLayoutElement',
+          condition: 'layoutItem.kind === "video"',
+          description:
+            'Video player component. Uses NESTED structure: source.src.url (NOT source.url).',
+          sourcePath: 'source[key]',
+          stylePath: 'style[key]',
+          optionsPath: 'options[key]',
+          usage: {
+            source:
+              '{ src: { url: string, width?: number, height?: number, format?: string } }',
+            style: 'BaseImageStyle with aspectRatio',
+            options: '{ aspectRatio, controls }',
+          },
+        },
+        {
+          level: 2,
+          component: 'YoutubeVideo',
+          condition: 'layoutItem.kind === "youtube-video"',
+          description:
+            'YouTube video thumbnail with play button. Opens in web view on press.',
+          sourcePath: 'source[key]',
+          stylePath: 'style[key]',
+          optionsPath: 'options[key]',
+          usage: {
+            source:
+              '{ videoId: string, thumbnailUrl?: string, params?: Record<string, any> }',
+            style: '{ root, thumbnailImage, playButton }',
+            options: '{ thumbnailAspectRatio, embedBaseUrl, hidePlayButton }',
+          },
+        },
+        {
+          level: 2,
+          component: 'LinkButtonLayoutElement',
+          condition: 'layoutItem.kind === "link-button"',
+          description: 'Button with link navigation on press.',
+          sourcePath: 'source[key]',
+          stylePath: 'style[key]',
+          optionsPath: 'options[key]',
+          usage: {
+            source: '{ text: string }',
+            style:
+              'ButtonV2Config (root, text, startIcon, endIcon, kind, states)',
+            options:
+              '{ link: { kind, value, params }, startIcon, endIcon, disabled, loading }',
+          },
+        },
+        {
+          level: 2,
+          component: 'SpacerLayoutElement',
+          condition: 'layoutItem.kind === "spacer"',
+          description: 'Empty View for spacing. No source data needed.',
+          stylePath: 'style[key]',
+          optionsPath: 'options[key]',
+          usage: {
+            source: 'none (not used)',
+            style: 'BaseStyle (height, width, margin, padding)',
+            options: 'ViewProps',
+          },
+        },
+        {
+          level: 2,
+          component: 'SocialSigninLayoutItem',
+          condition: 'layoutItem.kind === "social-signin"',
+          description:
+            'Social auth buttons (Apple, Google). Only shows when user is NOT authenticated.',
+          sourcePath: 'source[key]',
+          stylePath: 'style[key]',
+          optionsPath: 'options[key]',
+          usage: {
+            source: '{} (empty object)',
+            style: '{ root, apple, google }',
+            options:
+              '{ successRedirectScreenId, socialSigninProviders: { ios, android } }',
+          },
+        },
+        linkComponentCodeJson,
+        listComponentCodeJson,
+        verticalListComponentCodeJson,
+        accordionComponentCodeJson,
+      ],
+    },
+  ],
+}
+
+/**
+ * Block micro contexts for detailed nested component properties
+ *
+ * The Content block uses a dynamic layout system where components are keyed by their
+ * layout key. In properties below, [key] represents the unique key from layout[].key
+ */
+const microContexts: Record<string, BlockMicroContext> = {
+  root: {
+    key: 'root',
+    title: 'Root Wrapper',
+    description:
+      'Properties for the main wrapper container that holds all layout content. This is the outermost View that wraps the entire Content block.',
+    properties: [
+      {
+        path: 'style.wrapper',
+        type: 'BaseStyle',
+        description:
+          'Wrapper View container style (padding, margin, backgroundColor, alignItems, justifyContent, flex, etc.)',
+        optional: true,
+      },
+    ],
+    relatedKeys: ['layout', 'container'],
+  },
+  layout: {
+    key: 'layout',
+    title: 'Layout Structure',
+    description:
+      'The root layout configuration defining the dynamic layout tree structure. The layout is a tree of { kind, key, children } objects that determines which components are rendered and how they are nested.',
+    properties: [
+      {
+        path: 'layout',
+        type: 'LayoutSchema',
+        description:
+          'Root layout object with key: "root", kind: "row" | "column", and children array. This defines the entire component tree.',
+        optional: false,
+      },
+      {
+        path: 'layout.key',
+        type: 'string',
+        description:
+          'Must be "root" for the root layout. Used to access style.root for the root container.',
+        optional: false,
+        defaultValue: 'root',
+      },
+      {
+        path: 'layout.kind',
+        type: 'enum',
+        description:
+          'Root container type: "row" (horizontal flexDirection) or "column" (vertical flexDirection)',
+        optional: false,
+      },
+      {
+        path: 'layout.children',
+        type: 'Array<LayoutItem>',
+        description:
+          'Array of child layout items. Each child is { kind: string, key: string, children?: LayoutItem[] }. Kind determines component type, key is used for source/style/options lookup.',
+        optional: false,
+      },
+    ],
+    relatedKeys: ['container', 'baseComponent', 'list', 'accordion', 'link'],
+  },
+  container: {
+    key: 'container',
+    title: 'Container Components (Row/Column)',
+    description:
+      'Properties for row and column container components that organize layout items. Containers use Box component which supports backgrounds (image, gradient, solid).',
+    properties: [
+      {
+        path: 'layout[key].kind',
+        type: 'enum',
+        description:
+          'Container type: "row" (horizontal flex, flexDirection: row) or "column" (vertical flex, flexDirection: column)',
+        optional: false,
+      },
+      {
+        path: 'layout[key].key',
+        type: 'string',
+        description:
+          'Unique key for this container. Used to access source[key], style[key], options[key]. Must be unique across all layout items.',
+        optional: false,
+      },
+      {
+        path: 'layout[key].children',
+        type: 'Array<LayoutItem>',
+        description:
+          'Array of child layout items (can be nested containers, base components, lists, links, accordions)',
+        optional: true,
+      },
+      {
+        path: 'style[key]',
+        type: 'BaseStyle',
+        description:
+          'Container Box style. Common properties: padding, margin, backgroundColor, alignItems, justifyContent, flex, gap, borderRadius, borderWidth, borderColor. flexDirection is auto-set based on kind.',
+        optional: true,
+      },
+      {
+        path: 'style[key].padding',
+        type: 'number',
+        description:
+          'Padding on all sides (or use paddingTop, paddingBottom, paddingLeft, paddingRight, paddingHorizontal, paddingVertical)',
+        optional: true,
+      },
+      {
+        path: 'style[key].alignItems',
+        type: 'enum',
+        description:
+          'Cross-axis alignment: "flex-start", "flex-end", "center", "stretch", "baseline"',
+        optional: true,
+      },
+      {
+        path: 'style[key].justifyContent',
+        type: 'enum',
+        description:
+          'Main-axis alignment: "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"',
+        optional: true,
+      },
+      {
+        path: 'style[key].gap',
+        type: 'number',
+        description: 'Gap between children (React Native 0.71+)',
+        optional: true,
+      },
+      {
+        path: 'options[key].background',
+        type: 'BackgroundConfig',
+        description:
+          'Background configuration for this container. Same structure as root background: { kind, image, gradient, solid }',
+        optional: true,
+      },
+      {
+        path: 'options[key].background.kind',
+        type: 'enum',
+        description:
+          'Background type for this container: "image", "gradient", "solid", or "none"',
+        optional: true,
+      },
+    ],
+    relatedKeys: ['layout', 'baseComponent', 'list', 'accordion', 'link'],
+  },
+  baseComponent: {
+    key: 'baseComponent',
+    title: 'Base Components Overview',
+    description:
+      'Base UI Builder components are the leaf nodes of the layout tree. Each component type has specific source/style/options structure. See individual component contexts for details.',
+    properties: [
+      {
+        path: 'layout[key].kind',
+        type: 'enum',
+        description:
+          'Component type. Valid values: "text", "image", "icon", "html-rich-text", "video", "youtube-video", "link-button", "spacer", "social-signin"',
+        optional: false,
+      },
+      {
+        path: 'layout[key].key',
+        type: 'string',
+        description:
+          'Unique key for this component. Used to access source[key], style[key], options[key]. Must be unique across all layout items.',
+        optional: false,
+      },
+      {
+        path: 'source[key]',
+        type: 'ComponentSource',
+        description:
+          'Component-specific data. Structure varies by kind - see text, image, icon, etc. contexts for details.',
+        optional: true,
+      },
+      {
+        path: 'style[key]',
+        type: 'ComponentStyle',
+        description:
+          'Component-specific style. Structure varies by kind - see individual component contexts.',
+        optional: true,
+      },
+      {
+        path: 'options[key]',
+        type: 'ComponentOptions',
+        description:
+          'Component-specific options. Structure varies by kind - see individual component contexts.',
+        optional: true,
+      },
+    ],
+    relatedKeys: [
+      'text',
+      'image',
+      'icon',
+      'htmlRichText',
+      'video',
+      'youtubeVideo',
+      'linkButton',
+      'spacer',
+      'socialSignin',
+    ],
+  },
+  text: {
+    key: 'text',
+    title: 'Text Component',
+    description:
+      'Text component for displaying text content. Renders React Native Text component. Accepts string directly or object with text property.',
+    properties: [
+      {
+        path: 'layout[key].kind',
+        type: 'literal',
+        description: 'Must be "text"',
+        optional: false,
+        defaultValue: 'text',
+      },
+      {
+        path: 'source[key]',
+        type: 'string | { text: string }',
+        description:
+          'Text content. Can be: "Hello World" (string) or { text: "Hello World" } (object). Both work - object form extracted via source.text.',
+        optional: false,
+      },
+      {
+        path: 'source[key].text',
+        type: 'string',
+        description:
+          'Text content when using object form. Extracted from source[key].text if source is object.',
+        optional: true,
+      },
+      {
+        path: 'style[key]',
+        type: 'BaseTextStyle',
+        description:
+          'Text style properties. All React Native Text style properties are supported.',
+        optional: true,
+      },
+      {
+        path: 'style[key].fontSize',
+        type: 'number',
+        description: 'Font size in pixels',
+        optional: true,
+        defaultValue: 14,
+      },
+      {
+        path: 'style[key].fontWeight',
+        type: 'enum',
+        description: 'Font weight: "normal", "bold", "100"-"900"',
+        optional: true,
+      },
+      {
+        path: 'style[key].color',
+        type: 'string',
+        description: 'Text color (e.g., "#000000", "rgb(0,0,0)", "black")',
+        optional: true,
+      },
+      {
+        path: 'style[key].lineHeight',
+        type: 'number',
+        description: 'Line height in pixels',
+        optional: true,
+      },
+      {
+        path: 'style[key].textAlign',
+        type: 'enum',
+        description:
+          'Text alignment: "auto", "left", "right", "center", "justify"',
+        optional: true,
+      },
+      {
+        path: 'style[key].fontFamily',
+        type: 'string',
+        description: 'Font family name (must be loaded in app)',
+        optional: true,
+      },
+      {
+        path: 'style[key].textDecorationLine',
+        type: 'enum',
+        description:
+          'Text decoration: "none", "underline", "line-through", "underline line-through"',
+        optional: true,
+      },
+      {
+        path: 'style[key].textTransform',
+        type: 'enum',
+        description:
+          'Text transform: "none", "uppercase", "lowercase", "capitalize"',
+        optional: true,
+      },
+      {
+        path: 'options[key].numberOfLines',
+        type: 'number',
+        description:
+          'Maximum number of lines. Text will be truncated with ellipsis if exceeded.',
+        optional: true,
+      },
+      {
+        path: 'options[key].ellipsizeMode',
+        type: 'enum',
+        description:
+          'Truncation mode: "head", "middle", "tail", "clip". Only works with numberOfLines.',
+        optional: true,
+        defaultValue: 'tail',
+      },
+      {
+        path: 'options[key].selectable',
+        type: 'boolean',
+        description: 'Allow text selection (default: false)',
+        optional: true,
+        defaultValue: false,
+      },
+    ],
+    relatedKeys: ['baseComponent'],
+  },
+  image: {
+    key: 'image',
+    title: 'Image Component',
+    description:
+      'Image component supporting regular images, SVG files (.svg), and inline SVG strings (<svg>...</svg>). CRITICAL: Uses "src" property, NOT "url".',
+    properties: [
+      {
+        path: 'layout[key].kind',
+        type: 'literal',
+        description: 'Must be "image"',
+        optional: false,
+        defaultValue: 'image',
+      },
+      {
+        path: 'source[key].src',
+        type: 'string',
+        description:
+          'Image source URL or inline SVG. REQUIRED. Use "src", NOT "url". Examples: "https://example.com/image.jpg", "https://example.com/icon.svg", "<svg>...</svg>"',
+        optional: false,
+      },
+      {
+        path: 'source[key].width',
+        type: 'number',
+        description:
+          'Original image width in pixels. Used for aspect ratio calculation when style dimensions not specified.',
+        optional: true,
+      },
+      {
+        path: 'source[key].height',
+        type: 'number',
+        description:
+          'Original image height in pixels. Used with width for aspect ratio: width/height.',
+        optional: true,
+      },
+      {
+        path: 'style[key]',
+        type: 'BaseStyle',
+        description:
+          'Image container style. Applied to wrapper View. width/height/aspectRatio extracted for image sizing.',
+        optional: true,
+      },
+      {
+        path: 'style[key].width',
+        type: 'number | string',
+        description:
+          'Image width. If not set, auto-calculated from container width. Can be number (pixels) or string ("100%").',
+        optional: true,
+      },
+      {
+        path: 'style[key].height',
+        type: 'number | string',
+        description:
+          'Image height. If not set, calculated from width and aspectRatio.',
+        optional: true,
+      },
+      {
+        path: 'style[key].aspectRatio',
+        type: 'number',
+        description:
+          'Aspect ratio (width/height). Priority: style.aspectRatio > options.aspectRatio > source.width/source.height',
+        optional: true,
+      },
+      {
+        path: 'style[key].borderRadius',
+        type: 'number',
+        description: 'Border radius for rounded corners',
+        optional: true,
+      },
+      {
+        path: 'options[key].aspectRatio',
+        type: 'number',
+        description:
+          'Aspect ratio override. Takes precedence over source dimensions but not style.aspectRatio.',
+        optional: true,
+      },
+      {
+        path: 'options[key].resizeMode',
+        type: 'enum',
+        description:
+          'How image fits container: "cover" (fill and crop), "contain" (fit within), "stretch", "center"',
+        optional: true,
+        defaultValue: 'cover',
+      },
+      {
+        path: 'options[key].roundness',
+        type: 'number',
+        description:
+          'Border radius for image corners (alternative to style.borderRadius)',
+        optional: true,
+      },
+      {
+        path: 'options[key].autoHeight',
+        type: 'boolean',
+        description:
+          'Allow flexible height based on container. When true, height adapts to container.',
+        optional: true,
+        defaultValue: false,
+      },
+    ],
+    relatedKeys: ['baseComponent'],
+  },
+  icon: {
+    key: 'icon',
+    title: 'Icon Component',
+    description:
+      'Icon component displaying SVG icon from icon registry. Uses Icon component from @gauntlet/icons.',
+    properties: [
+      {
+        path: 'layout[key].kind',
+        type: 'literal',
+        description: 'Must be "icon"',
+        optional: false,
+        defaultValue: 'icon',
+      },
+      {
+        path: 'source[key].iconId',
+        type: 'string',
+        description:
+          'Icon ID from icon registry. REQUIRED. Must be a valid icon ID registered in the app.',
+        optional: false,
+      },
+      {
+        path: 'style[key]',
+        type: 'BaseIconStyle',
+        description: 'Icon style properties passed to SVG component.',
+        optional: true,
+      },
+      {
+        path: 'style[key].width',
+        type: 'number',
+        description: 'Icon width in pixels',
+        optional: true,
+        defaultValue: 24,
+      },
+      {
+        path: 'style[key].height',
+        type: 'number',
+        description: 'Icon height in pixels',
+        optional: true,
+        defaultValue: 24,
+      },
+      {
+        path: 'style[key].fill',
+        type: 'string',
+        description: 'Icon fill color (for filled icons)',
+        optional: true,
+      },
+      {
+        path: 'style[key].stroke',
+        type: 'string',
+        description: 'Icon stroke color (for outlined icons)',
+        optional: true,
+      },
+      {
+        path: 'style[key].strokeWidth',
+        type: 'number',
+        description: 'Icon stroke width',
+        optional: true,
+      },
+      {
+        path: 'style[key].color',
+        type: 'string',
+        description:
+          'Icon color (applies to both fill and stroke if not specified separately)',
+        optional: true,
+      },
+      {
+        path: 'options[key]',
+        type: 'SvgProps',
+        description:
+          'Additional React Native SVG props passed to Icon component.',
+        optional: true,
+      },
+    ],
+    relatedKeys: ['baseComponent'],
+  },
+  htmlRichText: {
+    key: 'htmlRichText',
+    title: 'HTML Rich Text Component',
+    description:
+      'Raw HTML renderer for simple HTML content. Directly renders HTML string without Shopify rich text parsing.',
+    properties: [
+      {
+        path: 'layout[key].kind',
+        type: 'literal',
+        description: 'Must be "html-rich-text"',
+        optional: false,
+        defaultValue: 'html-rich-text',
+      },
+      {
+        path: 'source[key]',
+        type: 'string',
+        description:
+          'Raw HTML content string. Examples: "<div>Hello World</div>", "<p style=\'color:red\'>Text</p>"',
+        optional: false,
+      },
+      {
+        path: 'style[key].tags',
+        type: 'Record<string, BaseTextStyle>',
+        description:
+          'Style mapping for HTML tags. Keys are tag names (p, h1, h2, h3, b, strong, i, em, a, ul, ol, li), values are style objects.',
+        optional: true,
+      },
+      {
+        path: 'style[key].tags.p',
+        type: 'BaseTextStyle',
+        description: 'Style for <p> paragraph tags',
+        optional: true,
+        defaultValue: { fontSize: 14, color: '#000000' },
+      },
+      {
+        path: 'style[key].tags.h1',
+        type: 'BaseTextStyle',
+        description: 'Style for <h1> heading tags',
+        optional: true,
+        defaultValue: { fontSize: 32, color: '#000000' },
+      },
+      {
+        path: 'style[key].tags.h2',
+        type: 'BaseTextStyle',
+        description: 'Style for <h2> heading tags',
+        optional: true,
+        defaultValue: { fontSize: 24, color: '#000000' },
+      },
+      {
+        path: 'style[key].tags.h3',
+        type: 'BaseTextStyle',
+        description: 'Style for <h3> heading tags',
+        optional: true,
+        defaultValue: { fontSize: 18, color: '#000000' },
+      },
+      {
+        path: 'style[key].tags.a',
+        type: 'BaseTextStyle',
+        description:
+          'Style for <a> link tags. Common: color, textDecorationLine',
+        optional: true,
+      },
+      {
+        path: 'style[key].tags.b',
+        type: 'BaseTextStyle',
+        description: 'Style for <b> bold tags (or use strong)',
+        optional: true,
+      },
+      {
+        path: 'style[key].tags.i',
+        type: 'BaseTextStyle',
+        description: 'Style for <i> italic tags (or use em)',
+        optional: true,
+      },
+      {
+        path: 'style[key].tags.ul',
+        type: 'BaseStyle',
+        description: 'Style for unordered list container',
+        optional: true,
+      },
+      {
+        path: 'style[key].tags.ol',
+        type: 'BaseStyle',
+        description: 'Style for ordered list container',
+        optional: true,
+      },
+      {
+        path: 'style[key].tags.li',
+        type: 'BaseTextStyle',
+        description: 'Style for list items',
+        optional: true,
+      },
+      {
+        path: 'options[key].enableUserAgentStyles',
+        type: 'boolean',
+        description: 'Enable browser default styles (default: false)',
+        optional: true,
+        defaultValue: false,
+      },
+      {
+        path: 'options[key].ignoredDomTags',
+        type: 'string[]',
+        description: 'Array of HTML tags to ignore during rendering',
+        optional: true,
+      },
+    ],
+    relatedKeys: ['baseComponent'],
+  },
+  video: {
+    key: 'video',
+    title: 'Video Component',
+    description:
+      'Video player component. CRITICAL: Uses NESTED structure source.src.url (NOT source.url directly). Supports native video playback with controls.',
+    properties: [
+      {
+        path: 'layout[key].kind',
+        type: 'literal',
+        description: 'Must be "video"',
+        optional: false,
+        defaultValue: 'video',
+      },
+      {
+        path: 'source[key].src',
+        type: 'object',
+        description:
+          'Video source object. NESTED structure - url is inside src object.',
+        optional: false,
+      },
+      {
+        path: 'source[key].src.url',
+        type: 'string',
+        description:
+          'Video URL. REQUIRED. Must be inside source.src object: source[key].src.url (NOT source[key].url)',
+        optional: false,
+      },
+      {
+        path: 'source[key].src.width',
+        type: 'number',
+        description:
+          'Video width in pixels. Used for aspect ratio calculation.',
+        optional: true,
+      },
+      {
+        path: 'source[key].src.height',
+        type: 'number',
+        description:
+          'Video height in pixels. Used with width for aspect ratio: width/height.',
+        optional: true,
+      },
+      {
+        path: 'source[key].src.format',
+        type: 'string',
+        description: 'Video format. Example: "mp4", "webm"',
+        optional: true,
+      },
+      {
+        path: 'style[key]',
+        type: 'BaseImageStyle',
+        description:
+          'Video container style. width/height/aspectRatio extracted for video sizing.',
+        optional: true,
+      },
+      {
+        path: 'style[key].width',
+        type: 'number | string',
+        description: 'Video width. If not set, auto-calculated from container.',
+        optional: true,
+      },
+      {
+        path: 'style[key].height',
+        type: 'number | string',
+        description: 'Video height. If not set, calculated from aspectRatio.',
+        optional: true,
+      },
+      {
+        path: 'style[key].aspectRatio',
+        type: 'number',
+        description: 'Video aspect ratio (width/height)',
+        optional: true,
+      },
+      {
+        path: 'options[key].aspectRatio',
+        type: 'number',
+        description:
+          'Aspect ratio override. Takes precedence over source dimensions.',
+        optional: true,
+      },
+      {
+        path: 'options[key].controls',
+        type: 'boolean',
+        description: 'Show video playback controls (play, pause, seek, etc.)',
+        optional: true,
+        defaultValue: true,
+      },
+    ],
+    relatedKeys: ['baseComponent'],
+  },
+  youtubeVideo: {
+    key: 'youtubeVideo',
+    title: 'YouTube Video Component',
+    description:
+      'YouTube video embed component. Displays thumbnail with play button overlay. On press, opens YouTube embed in web view.',
+    properties: [
+      {
+        path: 'layout[key].kind',
+        type: 'literal',
+        description: 'Must be "youtube-video"',
+        optional: false,
+        defaultValue: 'youtube-video',
+      },
+      {
+        path: 'source[key].videoId',
+        type: 'string',
+        description:
+          'YouTube video ID. REQUIRED. The ID from YouTube URL (e.g., "dQw4w9WgXcQ" from youtube.com/watch?v=dQw4w9WgXcQ)',
+        optional: false,
+      },
+      {
+        path: 'source[key].thumbnailUrl',
+        type: 'string',
+        description:
+          'Custom thumbnail URL. If not provided, defaults to YouTube thumbnail: https://img.youtube.com/vi/{videoId}/hqdefault.jpg',
+        optional: true,
+      },
+      {
+        path: 'source[key].params',
+        type: 'Record<string, any>',
+        description:
+          'YouTube embed parameters. Appended to embed URL. Common: { autoplay: 1, mute: 1, loop: 1, aspectRatio: 16/9 }',
+        optional: true,
+      },
+      {
+        path: 'style[key].root',
+        type: 'BaseStyle',
+        description:
+          'Container Pressable style. Wraps thumbnail and play button.',
+        optional: true,
+      },
+      {
+        path: 'style[key].thumbnailImage',
+        type: 'BaseStyle',
+        description: 'Thumbnail ImageBackground style',
+        optional: true,
+      },
+      {
+        path: 'style[key].playButton',
+        type: 'BaseIconStyle',
+        description:
+          'Play button SVG icon style. Default is red YouTube play button.',
+        optional: true,
+      },
+      {
+        path: 'style[key].playButton.width',
+        type: 'number',
+        description: 'Play button width',
+        optional: true,
+        defaultValue: 68,
+      },
+      {
+        path: 'style[key].playButton.height',
+        type: 'number',
+        description: 'Play button height',
+        optional: true,
+        defaultValue: 48,
+      },
+      {
+        path: 'options[key].thumbnailAspectRatio',
+        type: 'number',
+        description:
+          'Thumbnail aspect ratio. Default is 16/9 (standard YouTube). Can use source.params.aspectRatio if set.',
+        optional: true,
+        defaultValue: 1.78,
+      },
+      {
+        path: 'options[key].embedBaseUrl',
+        type: 'string',
+        description:
+          'Custom embed base URL. Default: https://solutions.appbrew.tech/youtube-embed/',
+        optional: true,
+      },
+      {
+        path: 'options[key].hidePlayButton',
+        type: 'boolean',
+        description: 'Hide the play button overlay',
+        optional: true,
+        defaultValue: false,
+      },
+    ],
+    relatedKeys: ['baseComponent'],
+  },
+  linkButton: {
+    key: 'linkButton',
+    title: 'Link Button Component',
+    description:
+      'Button component with link navigation. Uses Button component with onPress that calls gotoLink with configured link.',
+    properties: [
+      {
+        path: 'layout[key].kind',
+        type: 'literal',
+        description: 'Must be "link-button"',
+        optional: false,
+        defaultValue: 'link-button',
+      },
+      {
+        path: 'source[key].text',
+        type: 'string',
+        description: 'Button text label. REQUIRED. Displayed inside button.',
+        optional: false,
+      },
+      {
+        path: 'style[key]',
+        type: 'ButtonV2Config',
+        description:
+          'Button style configuration. Supports themed button kinds.',
+        optional: true,
+      },
+      {
+        path: 'style[key].root',
+        type: 'BaseStyle',
+        description:
+          'Button container style (Pressable). Common: padding, backgroundColor, borderRadius, borderWidth, alignItems, justifyContent',
+        optional: true,
+      },
+      {
+        path: 'style[key].text',
+        type: 'BaseTextStyle',
+        description: 'Button text style. Common: color, fontSize, fontWeight',
+        optional: true,
+      },
+      {
+        path: 'style[key].startIcon',
+        type: 'IconStyle',
+        description:
+          'Start icon style: { root: BaseStyle, icon: { width, height, fill, stroke, strokeWidth } }',
+        optional: true,
+      },
+      {
+        path: 'style[key].endIcon',
+        type: 'IconStyle',
+        description:
+          'End icon style: { root: BaseStyle, icon: { width, height, fill, stroke, strokeWidth } }',
+        optional: true,
+      },
+      {
+        path: 'style[key].kind',
+        type: 'enum',
+        description:
+          'Button theme kind: "primary", "secondary", "tertiary". Applies theme-defined styles.',
+        optional: true,
+      },
+      {
+        path: 'style[key].loader',
+        type: 'LoaderStyle',
+        description:
+          'Loader style when loading: { root: BaseStyle, indicator: { root: BaseStyle } }',
+        optional: true,
+      },
+      {
+        path: 'style[key].states.disabled',
+        type: 'object',
+        description:
+          'Styles applied when button is disabled: { root: BaseStyle }',
+        optional: true,
+      },
+      {
+        path: 'style[key].states.active',
+        type: 'object',
+        description:
+          'Styles applied when button is active: { root: BaseStyle }',
+        optional: true,
+      },
+      {
+        path: 'options[key].link',
+        type: 'LinkConfig',
+        description:
+          'Link configuration for navigation on press. Structure: { kind: string, value: string, params?: Record<string, any> }',
+        optional: true,
+      },
+      {
+        path: 'options[key].link.kind',
+        type: 'string',
+        description:
+          'Link type: "screen", "product", "collection", "url", "page", etc.',
+        optional: true,
+      },
+      {
+        path: 'options[key].link.value',
+        type: 'string',
+        description:
+          'Link target: screen ID, product handle, collection handle, URL, etc.',
+        optional: true,
+      },
+      {
+        path: 'options[key].link.params',
+        type: 'Record<string, any>',
+        description: 'Additional navigation parameters',
+        optional: true,
+      },
+      {
+        path: 'options[key].startIcon',
+        type: 'string',
+        description: 'Start icon ID from icon registry',
+        optional: true,
+      },
+      {
+        path: 'options[key].endIcon',
+        type: 'string',
+        description: 'End icon ID from icon registry',
+        optional: true,
+      },
+      {
+        path: 'options[key].disabled',
+        type: 'boolean',
+        description: 'Disable button interactions',
+        optional: true,
+        defaultValue: false,
+      },
+      {
+        path: 'options[key].loading',
+        type: 'boolean',
+        description: 'Show loading indicator instead of content',
+        optional: true,
+        defaultValue: false,
+      },
+      {
+        path: 'options[key].enableHapticTouch',
+        type: 'boolean',
+        description: 'Enable haptic feedback on press',
+        optional: true,
+        defaultValue: false,
+      },
+      {
+        path: 'options[key].hapticTouchValue',
+        type: 'enum',
+        description: 'Haptic feedback intensity: "impactHeavy" or "soft"',
+        optional: true,
+        defaultValue: 'soft',
+      },
+    ],
+    relatedKeys: ['baseComponent'],
+  },
+  spacer: {
+    key: 'spacer',
+    title: 'Spacer Component',
+    description:
+      'Empty View component for creating space in layouts. No source data needed. Use style.height or style.width for sizing.',
+    properties: [
+      {
+        path: 'layout[key].kind',
+        type: 'literal',
+        description: 'Must be "spacer"',
+        optional: false,
+        defaultValue: 'spacer',
+      },
+      {
+        path: 'style[key]',
+        type: 'BaseStyle',
+        description:
+          'Spacer style. Use height for vertical space, width for horizontal space.',
+        optional: true,
+      },
+      {
+        path: 'style[key].height',
+        type: 'number | string',
+        description:
+          'Spacer height for vertical spacing. Example: 16 (pixels) or "10%" (percentage)',
+        optional: true,
+      },
+      {
+        path: 'style[key].width',
+        type: 'number | string',
+        description:
+          'Spacer width for horizontal spacing. Example: 16 (pixels) or "10%" (percentage)',
+        optional: true,
+      },
+      {
+        path: 'style[key].flex',
+        type: 'number',
+        description: 'Flex grow factor. Use flex: 1 to fill remaining space.',
+        optional: true,
+      },
+      {
+        path: 'style[key].margin',
+        type: 'number',
+        description: 'Margin around spacer (or marginTop, marginBottom, etc.)',
+        optional: true,
+      },
+      {
+        path: 'options[key]',
+        type: 'ViewProps',
+        description: 'React Native View props (excluding style)',
+        optional: true,
+      },
+    ],
+    relatedKeys: ['baseComponent'],
+  },
+  socialSignin: {
+    key: 'socialSignin',
+    title: 'Social Sign-in Component',
+    description:
+      'Social authentication buttons (Apple, Google). ONLY renders when user is NOT authenticated. After successful sign-in, redirects to configured screen.',
+    properties: [
+      {
+        path: 'layout[key].kind',
+        type: 'literal',
+        description: 'Must be "social-signin"',
+        optional: false,
+        defaultValue: 'social-signin',
+      },
+      {
+        path: 'source[key]',
+        type: 'object',
+        description:
+          'Source data. Not used by component - can be empty object {}. Passed to SocialAuth as socialSource.',
+        optional: true,
+      },
+      {
+        path: 'style[key].root',
+        type: 'BaseStyle',
+        description:
+          'Social buttons container style. Applied to socialButtonsContainer.',
+        optional: true,
+      },
+      {
+        path: 'style[key].apple',
+        type: 'BaseStyle',
+        description:
+          'Apple sign-in button style. Common: backgroundColor, borderRadius, padding',
+        optional: true,
+      },
+      {
+        path: 'style[key].google',
+        type: 'BaseStyle',
+        description:
+          'Google sign-in button style. Common: backgroundColor, borderRadius, padding',
+        optional: true,
+      },
+      {
+        path: 'options[key].successRedirectScreenId',
+        type: 'string',
+        description:
+          'Screen ID to navigate to after successful sign-in. Creates link: { kind: "screen", value: screenId }',
+        optional: true,
+      },
+      {
+        path: 'options[key].socialSigninProviders',
+        type: 'object',
+        description:
+          'Platform-specific provider configuration. Separate arrays for iOS and Android.',
+        optional: true,
+      },
+      {
+        path: 'options[key].socialSigninProviders.ios',
+        type: 'string[]',
+        description:
+          'Array of provider IDs for iOS. Example: ["apple", "google"]',
+        optional: true,
+      },
+      {
+        path: 'options[key].socialSigninProviders.android',
+        type: 'string[]',
+        description: 'Array of provider IDs for Android. Example: ["google"]',
+        optional: true,
+      },
+    ],
+    relatedKeys: ['baseComponent'],
+  },
+  link: {
+    key: 'link',
+    title: 'Link Wrapper Component',
+    description:
+      'Link wrapper that makes children clickable. Wraps any layout items in a Pressable that navigates on press. Children can be any valid layout items.',
+    properties: [
+      {
+        path: 'layout[key].kind',
+        type: 'literal',
+        description: 'Must be "link"',
+        optional: false,
+        defaultValue: 'link',
+      },
+      {
+        path: 'layout[key].children',
+        type: 'Array<LayoutItem>',
+        description:
+          'Child layout items rendered inside the link. REQUIRED. These become clickable.',
+        optional: false,
+      },
+      {
+        path: 'source[key]',
+        type: 'LinkConfig',
+        description:
+          'Link configuration object with kind, value, and optional params.',
+        optional: false,
+      },
+      {
+        path: 'source[key].kind',
+        type: 'string',
+        description:
+          'Link type. REQUIRED. Values: "screen", "product", "collection", "url", "page", "search", etc.',
+        optional: false,
+      },
+      {
+        path: 'source[key].value',
+        type: 'string',
+        description:
+          'Link target value. REQUIRED. Screen ID, product handle, collection handle, URL, etc.',
+        optional: false,
+      },
+      {
+        path: 'source[key].params',
+        type: 'Record<string, any>',
+        description:
+          'Additional navigation parameters. Passed to navigation function.',
+        optional: true,
+      },
+      {
+        path: 'source[key].external',
+        type: 'boolean',
+        description:
+          'Whether link opens external URL (e.g., in browser). Used with kind: "url".',
+        optional: true,
+      },
+      {
+        path: 'style[key]',
+        type: 'LinkStyle',
+        description: 'MUST REQUIRED if link is used, Link wrapper style',
+        optional: false,
+      },
+      {
+        path: 'style[key].root',
+        type: 'BaseStyle',
+        description:
+          'MUST REQUIRED if link is used, Pressable container style. Applied to link wrapper.',
+        optional: false,
+      },
+      {
+        path: 'options[key].pressableProps',
+        type: 'PressableProps',
+        description:
+          'React Native Pressable props. Common: hitSlop, android_ripple, pressRetentionOffset',
+        optional: true,
+      },
+    ],
+    relatedKeys: ['layout', 'baseComponent'],
+  },
+  list: {
+    key: 'list',
+    title: 'List Component',
+    description:
+      'FlatList-based component that renders items from source array. First child layout is used as template for each item. Supports horizontal/vertical, item gaps, multi-column.',
+    properties: [
+      {
+        path: 'layout[key].kind',
+        type: 'literal',
+        description: 'Must be "list"',
+        optional: false,
+        defaultValue: 'list',
+      },
+      {
+        path: 'layout[key].children',
+        type: 'Array<LayoutItem>',
+        description:
+          'Child layout items. First child (children[0]) is used as template for each item.',
+        optional: false,
+      },
+      {
+        path: 'layout[key].children[0]',
+        type: 'LayoutItem',
+        description:
+          'Template layout for each item. REQUIRED. This layout is rendered for each item in source array.',
+        optional: false,
+      },
+      {
+        path: 'source[key]',
+        type: 'Array<any>',
+        description:
+          'Array of items to render. REQUIRED. Each item is passed to template layout.',
+        optional: false,
+      },
+      {
+        path: 'style.root',
+        type: 'BaseStyle',
+        description:
+          'Root container style. Applied to wrapper View around FlatList.',
+        optional: true,
+      },
+      {
+        path: 'style.list',
+        type: 'BaseStyle',
+        description: 'FlatList contentContainerStyle',
+        optional: true,
+      },
+      {
+        path: 'style.item',
+        type: 'BaseStyle',
+        description: 'Style for each item wrapper',
+        optional: true,
+      },
+      {
+        path: 'style.oddItem',
+        type: 'BaseStyle',
+        description: 'Additional style for odd-indexed items (0, 2, 4...)',
+        optional: true,
+      },
+      {
+        path: 'style.evenItem',
+        type: 'BaseStyle',
+        description: 'Additional style for even-indexed items (1, 3, 5...)',
+        optional: true,
+      },
+      {
+        path: 'options.itemGap',
+        type: 'number',
+        description:
+          'Gap between items in pixels. Creates separator View with this height/width.',
+        optional: true,
+        defaultValue: 8,
+      },
+      {
+        path: 'options.horizontal',
+        type: 'boolean',
+        description: 'Render list horizontally (default: false = vertical)',
+        optional: true,
+        defaultValue: false,
+      },
+      {
+        path: 'options.itemPerRow',
+        type: 'number',
+        description:
+          'Number of columns (vertical) or items per screen (horizontal). Used for item width calculation.',
+        optional: true,
+        defaultValue: 1,
+      },
+      {
+        path: 'options.columnGap',
+        type: 'number',
+        description: 'Gap between columns in multi-column layout',
+        optional: true,
+        defaultValue: 8,
+      },
+      {
+        path: 'options.fraction',
+        type: 'number',
+        description:
+          'Fraction of next item visible in horizontal mode. Used for peek effect.',
+        optional: true,
+        defaultValue: 0,
+      },
+    ],
+    relatedKeys: ['layout', 'baseComponent'],
+  },
+  verticalList: {
+    key: 'verticalList',
+    title: 'Vertical List Component',
+    description:
+      'View-based vertical list with grid support. Unlike FlatList-based list, renders all items at once. Supports separators, multi-column grid.',
+    properties: [
+      {
+        path: 'layout[key].kind',
+        type: 'literal',
+        description: 'Must be "vertical-list"',
+        optional: false,
+        defaultValue: 'vertical-list',
+      },
+      {
+        path: 'layout[key].children',
+        type: 'Array<LayoutItem>',
+        description:
+          'Child layout items. First child (children[0]) is used as template for each item.',
+        optional: false,
+      },
+      {
+        path: 'layout[key].children[0]',
+        type: 'LayoutItem',
+        description:
+          'Template layout for each item. REQUIRED. Rendered for each item in source.data array.',
+        optional: false,
+      },
+      {
+        path: 'source[key]',
+        type: 'object',
+        description: 'Source object with data array. NESTED structure.',
+        optional: false,
+      },
+      {
+        path: 'source[key].data',
+        type: 'Array<any>',
+        description:
+          'Array of items to render. REQUIRED. Note: data is nested inside source[key].data (NOT source[key] directly).',
+        optional: false,
+      },
+      {
+        path: 'source[key].data[].id',
+        type: 'string',
+        description:
+          'Each item MUST have an "id" property. Used by keyExtractor for React keys.',
+        optional: false,
+      },
+      {
+        path: 'style.list',
+        type: 'VerticalListStyle',
+        description: 'List style configuration object',
+        optional: true,
+      },
+      {
+        path: 'style.list.wrapper',
+        type: 'BaseStyle',
+        description: 'Outer wrapper container style',
+        optional: true,
+      },
+      {
+        path: 'style.list.root',
+        type: 'BaseStyle',
+        description:
+          'Row container style (flexDirection: row by default for grid)',
+        optional: true,
+      },
+      {
+        path: 'style.list.separator',
+        type: 'object',
+        description: 'Separator style: { root: BaseStyle }',
+        optional: true,
+      },
+      {
+        path: 'style.list.cell',
+        type: 'BaseStyle',
+        description: 'Individual cell/item container style',
+        optional: true,
+      },
+      {
+        path: 'style.list.cellInFirstRow',
+        type: 'BaseStyle',
+        description: 'Additional style for cells in first row',
+        optional: true,
+      },
+      {
+        path: 'style.list.cellInFirstCol',
+        type: 'BaseStyle',
+        description: 'Additional style for cells in first column',
+        optional: true,
+      },
+      {
+        path: 'style.list.rowSeparator',
+        type: 'BaseStyle',
+        description: 'Style for separator between rows',
+        optional: true,
+      },
+      {
+        path: 'style.list.columnSeparator',
+        type: 'BaseStyle',
+        description: 'Style for separator between columns',
+        optional: true,
+      },
+      {
+        path: 'options.itemGap',
+        type: 'number',
+        description:
+          'Gap between items (applied to separator height). Overrides style.list.separator.root.height',
+        optional: true,
+      },
+      {
+        path: 'options.numColumns',
+        type: 'number',
+        description: 'Number of columns in grid. Default: 1',
+        optional: true,
+        defaultValue: 1,
+      },
+    ],
+    relatedKeys: ['layout', 'baseComponent'],
+  },
+  accordion: {
+    key: 'accordion',
+    title: 'Accordion Component',
+    description:
+      'Collapsible accordion with heading and body. REQUIRES exactly 2 children: children[0] = heading (clickable), children[1] = body (collapsible). Supports expand/collapse icons and animation.',
+    properties: [
+      {
+        path: 'layout[key].kind',
+        type: 'literal',
+        description: 'Must be "accordion"',
+        optional: false,
+        defaultValue: 'accordion',
+      },
+      {
+        path: 'layout[key].children',
+        type: 'Array<LayoutItem>',
+        description:
+          'MUST have exactly 2 children. children[0] = heading, children[1] = body.',
+        optional: false,
+      },
+      {
+        path: 'layout[key].children[0]',
+        type: 'LayoutItem',
+        description:
+          'Heading layout. REQUIRED. Rendered as clickable accordion header. Can be any layout items.',
+        optional: false,
+      },
+      {
+        path: 'layout[key].children[1]',
+        type: 'LayoutItem',
+        description:
+          'Body layout. REQUIRED. Rendered as collapsible content. Can be any layout items.',
+        optional: false,
+      },
+      {
+        path: 'style[key]',
+        type: 'AccordionStyle',
+        description: 'Accordion style configuration',
+        optional: true,
+      },
+      {
+        path: 'style[key].root',
+        type: 'BaseStyle',
+        description: 'Root container style (wraps heading and body)',
+        optional: true,
+      },
+      {
+        path: 'style[key].heading',
+        type: 'object',
+        description:
+          'Heading container style: { root: BaseStyle }. Applied when collapsed.',
+        optional: true,
+      },
+      {
+        path: 'style[key].heading.root',
+        type: 'BaseStyle',
+        description:
+          'Heading Pressable style. Common: flexDirection: row, alignItems: center, padding, backgroundColor',
+        optional: true,
+      },
+      {
+        path: 'style[key].headingExpanded',
+        type: 'object',
+        description:
+          'Additional heading style when expanded: { root: BaseStyle }. Merged with heading style.',
+        optional: true,
+      },
+      {
+        path: 'style[key].headingExpanded.root',
+        type: 'BaseStyle',
+        description: 'Heading style additions when accordion is expanded',
+        optional: true,
+      },
+      {
+        path: 'style[key].icon',
+        type: 'IconStyle',
+        description:
+          'Expand/collapse icon style: { root: BaseStyle, icon: BaseIconStyle }',
+        optional: true,
+      },
+      {
+        path: 'style[key].icon.root',
+        type: 'BaseStyle',
+        description: 'Icon container style',
+        optional: true,
+      },
+      {
+        path: 'style[key].icon.icon',
+        type: 'BaseIconStyle',
+        description:
+          'Icon SVG style: { width, height, fill, stroke, strokeWidth }',
+        optional: true,
+      },
+      {
+        path: 'options[key].defaultExpanded',
+        type: 'boolean',
+        description: 'Initial expanded state. Default: false (collapsed)',
+        optional: true,
+        defaultValue: false,
+      },
+      {
+        path: 'options[key].collapseIcon',
+        type: 'string',
+        description:
+          'Icon ID for collapse icon (shown when expanded). Default: "expand"',
+        optional: true,
+        defaultValue: 'expand',
+      },
+      {
+        path: 'options[key].expandIcon',
+        type: 'string',
+        description:
+          'Icon ID for expand icon (shown when collapsed). Default: "collapse"',
+        optional: true,
+        defaultValue: 'collapse',
+      },
+    ],
+    relatedKeys: ['layout', 'baseComponent'],
+  },
+}
+
+export const contentBlockDefinition: BlockDefinition = {
+  zodSchema,
+  codeJson,
+  microContexts,
+  microContextKeys: [
+    'root',
+    'layout',
+    'container',
+    'baseComponent',
+    'text',
+    'image',
+    'icon',
+    'htmlRichText',
+    'video',
+    'youtubeVideo',
+    'linkButton',
+    'spacer',
+    'socialSignin',
+    'link',
+    'list',
+    'verticalList',
+    'accordion',
+  ],
+}