@proulr/sdui-components 0.1.11 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",
   "exports": {

package/src/renderer/ads/native-ad-catalog.ts

@@ -1,11 +1,21 @@
+import type { ReactElement } from 'react';
+
 export type NativeAdPlacementConfig = {
   aspectRatio?: number;
 };
 
+export type NativeAdWebSlotProps = {
+  placement: string;
+  width?: number;
+  aspectRatio: number;
+};
+
 export type NativeAdCatalog = {
   isEnabled: () => boolean;
   resolveAdUnitId: (placement: string, testNativeUnitId: string) => string;
   getPlacementConfig?: (placement: string) => NativeAdPlacementConfig | undefined;
+  /** Web-only: AdSense (ou outro). Mobile ignora. */
+  renderWebSlot?: (props: NativeAdWebSlotProps) => ReactElement | null;
 };
 
 let nativeAdCatalog: NativeAdCatalog | null = null;

package/src/renderer/blocks/SduiNativeAdBlock.web.tsx

@@ -1,6 +1,41 @@
+import {
+  DEFAULT_NATIVE_AD_ASPECT_RATIO,
+  DEFAULT_NATIVE_AD_PLACEMENT,
+  getNativeAdCatalog,
+} from '../ads/native-ad-catalog';
 import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
 
-/** Web stub — native ads require a native build. */
-export function SduiNativeAdBlock(_props: SduiBlockRenderProps) {
-  return null;
+function resolveBlockWidth(props: Record<string, unknown>): number | undefined {
+  if (typeof props.width === 'number' && props.width > 0) return props.width;
+  return undefined;
+}
+
+function resolvePlacement(props: Record<string, unknown>): string {
+  return typeof props.placement === 'string' && props.placement.length > 0
+    ? props.placement
+    : DEFAULT_NATIVE_AD_PLACEMENT;
+}
+
+function resolveAspectRatio(placement: string, props: Record<string, unknown>): number {
+  if (typeof props.aspect_ratio === 'number' && props.aspect_ratio > 0) {
+    return props.aspect_ratio;
+  }
+
+  const catalog = getNativeAdCatalog();
+  const placementConfig = catalog?.getPlacementConfig?.(placement);
+  return placementConfig?.aspectRatio ?? DEFAULT_NATIVE_AD_ASPECT_RATIO;
+}
+
+/** Web — AdSense via `catalog.renderWebSlot` (configurado no app). */
+export function SduiNativeAdBlock({ block }: SduiBlockRenderProps) {
+  const catalog = getNativeAdCatalog();
+  if (!catalog?.isEnabled() || !catalog.renderWebSlot) {
+    return null;
+  }
+
+  const placement = resolvePlacement(block.props);
+  const width = resolveBlockWidth(block.props);
+  const aspectRatio = resolveAspectRatio(placement, block.props);
+
+  return catalog.renderWebSlot({ placement, width, aspectRatio });
 }

package/src/renderer/index.ts

@@ -50,6 +50,10 @@ export {
   DEFAULT_NATIVE_AD_PLACEMENT,
   DEFAULT_NATIVE_AD_ASPECT_RATIO,
 } from './ads/native-ad-catalog';
-export type { NativeAdCatalog, NativeAdPlacementConfig } from './ads/native-ad-catalog';
+export type {
+  NativeAdCatalog,
+  NativeAdPlacementConfig,
+  NativeAdWebSlotProps,
+} from './ads/native-ad-catalog';
 export * from './ui';
 export { brToISO, isValidDateBR, maskDateBR } from './lib/brazilian-date-input';