@ohhwells/bridge 0.1.52 → 0.1.53-next.145

package/dist/index.d.cts

@@ -7,6 +7,145 @@ import { Toggle as Toggle$1, DropdownMenu as DropdownMenu$1, Tooltip as Tooltip$
 
 declare function OhhwellsBridge(): React__default.ReactPortal | null;
 
+/**
+ * AI layout-tree contract — the bridge-side vocabulary for rendering
+ * AI-generated sections.
+ *
+ * The source of truth is the backend's `app/constants/ai-block-library.ts` +
+ * `app/helpers/ai-layout-tree.ts`: the server validates every tree fail-closed
+ * before it ever reaches the bridge, so rendering trusts the shape but still
+ * degrades gracefully (unknown block types render nothing, never throw).
+ * `schemaVersion` guards cross-version drift: the renderer only accepts
+ * versions it knows.
+ */
+declare const AI_TREE_SCHEMA_VERSIONS: readonly [1];
+type SectionScaffold = 'stacked' | 'split' | 'overlay';
+type AiBlockType = 'text' | 'button' | 'media' | 'media-list' | 'rating' | 'divider' | 'input' | 'section-header' | 'button-row' | 'card' | 'collection' | 'accordion' | 'form' | 'embed' | 'schedule-widget';
+interface AiBlockNode {
+    type: AiBlockType;
+    span: number;
+    slots?: Record<string, unknown>;
+    children?: AiBlockNode[];
+    items?: Array<{
+        question: string;
+        answer: string;
+    }>;
+    animation?: {
+        effect: 'fade-in' | 'fade-in-up' | 'slide-in-left' | 'slide-in-right' | 'zoom-in';
+        trigger: 'on-scroll' | 'on-load' | 'on-hover';
+        duration: 'fast' | 'normal' | 'slow';
+        stagger?: boolean;
+    };
+}
+interface AiSectionSettings {
+    spacing?: 'tight' | 'balanced' | 'airy';
+    alignment?: 'left' | 'center';
+    ratio?: '1:1' | '5:3' | '3:5';
+    verticalPosition?: 'top' | 'center';
+    overlayIntensity?: 'low' | 'medium' | 'high';
+    backgroundMedia?: string;
+}
+interface AiLayoutTree {
+    schemaVersion: number;
+    type: 'section';
+    scaffold: SectionScaffold;
+    tag?: string;
+    settings?: AiSectionSettings;
+    rows: Array<{
+        blocks: AiBlockNode[];
+    }>;
+}
+/** The site brand kit the renderer styles from (editor Brand settings). */
+interface AiBrandKit {
+    palette: {
+        dark: string;
+        primary: string;
+        accent: string;
+        light: string;
+    };
+    fonts: {
+        heading: string;
+        body: string;
+    };
+}
+/** Section System defaults — used when a site has no brand kit override. */
+declare const AI_DEFAULT_BRAND: AiBrandKit;
+/** Design tokens from the Section System Blocks page (px unless noted). */
+declare const AI_TREE_TOKENS: {
+    readonly textPrimaryForeground: "#FAFAF9";
+    readonly spacing2: 8;
+    readonly spacing3: 12;
+    readonly spacing4: 16;
+    readonly spacing6: 24;
+    readonly spacing8: 32;
+    readonly paddingBlock: 32;
+    readonly radiusButton: 10;
+    readonly radiusCard: 18;
+    readonly sectionMaxWidth: 1280;
+    readonly sectionPadding: {
+        readonly tight: 40;
+        readonly balanced: 64;
+        readonly airy: 96;
+    };
+    readonly type: {
+        readonly display: {
+            readonly size: 56;
+            readonly line: 1.1;
+            readonly weight: 700;
+        };
+        readonly h2: {
+            readonly size: 40;
+            readonly line: 1.15;
+            readonly weight: 700;
+        };
+        readonly h3: {
+            readonly size: 24;
+            readonly line: 1.3;
+            readonly weight: 700;
+        };
+        readonly bodyL: {
+            readonly size: 18;
+            readonly line: 1.45;
+            readonly weight: 400;
+        };
+        readonly bodyM: {
+            readonly size: 16;
+            readonly line: 1.5;
+            readonly weight: 400;
+        };
+        readonly bodyMBold: {
+            readonly size: 16;
+            readonly line: 1.5;
+            readonly weight: 700;
+        };
+        readonly eyebrow: {
+            readonly size: 14;
+            readonly line: 1.5;
+            readonly weight: 500;
+        };
+        readonly button: {
+            readonly size: 16;
+            readonly line: 1.5;
+            readonly weight: 500;
+        };
+    };
+};
+declare function isRenderableTree(value: unknown): value is AiLayoutTree;
+
+interface AiTreeRendererProps {
+    tree: AiLayoutTree;
+    brand?: AiBrandKit;
+    /** Resolves a media ref to a URL; null renders a placeholder. */
+    resolveMedia?: (ref: string) => string | null;
+    /**
+     * When set (e.g. `ai.<sectionId>`), text and media elements emit
+     * `data-ohw-key="<prefix>.<path>"` + `data-ohw-editable` markers, making
+     * generated sections click-to-edit and AI-editable like template sections.
+     */
+    editKeyPrefix?: string;
+}
+declare function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }: AiTreeRendererProps): react_jsx_runtime.JSX.Element | null;
+
 type LinkPage = {
     path: string;
     title: string;
@@ -285,4 +424,4 @@ declare function useOhwCarousel(key: string, initial: CarouselSlide[]): {
     bind: Record<string, string>;
 };
 
-export { type CarouselSlide, CustomToolbar, CustomToolbarButton, CustomToolbarDivider, DragHandle, DropIndicator, type DropIndicatorProps, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, ItemActionToolbar, type ItemActionToolbarProps, ItemInteractionLayer, type ItemInteractionLayerProps, type ItemInteractionState, LinkEditorPanel, type LinkModalMode, type LinkModalProps, type LinkPage, LinkPopover, type LinkSection, OhhwellsBridge, SchedulingWidget, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buildTarget, dropIndicatorVariants, filterAvailablePages, getEditModeInitialState, isEditSessionActive, isValidUrl, parseTarget, toggleVariants, useOhwCarousel, validateUrlInput };
+export { AI_DEFAULT_BRAND, AI_TREE_SCHEMA_VERSIONS, AI_TREE_TOKENS, type AiBlockNode, type AiBrandKit, type AiLayoutTree, AiTreeRenderer, type AiTreeRendererProps, type CarouselSlide, CustomToolbar, CustomToolbarButton, CustomToolbarDivider, DragHandle, DropIndicator, type DropIndicatorProps, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, ItemActionToolbar, type ItemActionToolbarProps, ItemInteractionLayer, type ItemInteractionLayerProps, type ItemInteractionState, LinkEditorPanel, type LinkModalMode, type LinkModalProps, type LinkPage, LinkPopover, type LinkSection, OhhwellsBridge, SchedulingWidget, type SectionScaffold, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buildTarget, dropIndicatorVariants, filterAvailablePages, getEditModeInitialState, isEditSessionActive, isRenderableTree, isValidUrl, parseTarget, toggleVariants, useOhwCarousel, validateUrlInput };

package/dist/index.d.ts

@@ -7,6 +7,145 @@ import { Toggle as Toggle$1, DropdownMenu as DropdownMenu$1, Tooltip as Tooltip$
 
 declare function OhhwellsBridge(): React__default.ReactPortal | null;
 
+/**
+ * AI layout-tree contract — the bridge-side vocabulary for rendering
+ * AI-generated sections.
+ *
+ * The source of truth is the backend's `app/constants/ai-block-library.ts` +
+ * `app/helpers/ai-layout-tree.ts`: the server validates every tree fail-closed
+ * before it ever reaches the bridge, so rendering trusts the shape but still
+ * degrades gracefully (unknown block types render nothing, never throw).
+ * `schemaVersion` guards cross-version drift: the renderer only accepts
+ * versions it knows.
+ */
+declare const AI_TREE_SCHEMA_VERSIONS: readonly [1];
+type SectionScaffold = 'stacked' | 'split' | 'overlay';
+type AiBlockType = 'text' | 'button' | 'media' | 'media-list' | 'rating' | 'divider' | 'input' | 'section-header' | 'button-row' | 'card' | 'collection' | 'accordion' | 'form' | 'embed' | 'schedule-widget';
+interface AiBlockNode {
+    type: AiBlockType;
+    span: number;
+    slots?: Record<string, unknown>;
+    children?: AiBlockNode[];
+    items?: Array<{
+        question: string;
+        answer: string;
+    }>;
+    animation?: {
+        effect: 'fade-in' | 'fade-in-up' | 'slide-in-left' | 'slide-in-right' | 'zoom-in';
+        trigger: 'on-scroll' | 'on-load' | 'on-hover';
+        duration: 'fast' | 'normal' | 'slow';
+        stagger?: boolean;
+    };
+}
+interface AiSectionSettings {
+    spacing?: 'tight' | 'balanced' | 'airy';
+    alignment?: 'left' | 'center';
+    ratio?: '1:1' | '5:3' | '3:5';
+    verticalPosition?: 'top' | 'center';
+    overlayIntensity?: 'low' | 'medium' | 'high';
+    backgroundMedia?: string;
+}
+interface AiLayoutTree {
+    schemaVersion: number;
+    type: 'section';
+    scaffold: SectionScaffold;
+    tag?: string;
+    settings?: AiSectionSettings;
+    rows: Array<{
+        blocks: AiBlockNode[];
+    }>;
+}
+/** The site brand kit the renderer styles from (editor Brand settings). */
+interface AiBrandKit {
+    palette: {
+        dark: string;
+        primary: string;
+        accent: string;
+        light: string;
+    };
+    fonts: {
+        heading: string;
+        body: string;
+    };
+}
+/** Section System defaults — used when a site has no brand kit override. */
+declare const AI_DEFAULT_BRAND: AiBrandKit;
+/** Design tokens from the Section System Blocks page (px unless noted). */
+declare const AI_TREE_TOKENS: {
+    readonly textPrimaryForeground: "#FAFAF9";
+    readonly spacing2: 8;
+    readonly spacing3: 12;
+    readonly spacing4: 16;
+    readonly spacing6: 24;
+    readonly spacing8: 32;
+    readonly paddingBlock: 32;
+    readonly radiusButton: 10;
+    readonly radiusCard: 18;
+    readonly sectionMaxWidth: 1280;
+    readonly sectionPadding: {
+        readonly tight: 40;
+        readonly balanced: 64;
+        readonly airy: 96;
+    };
+    readonly type: {
+        readonly display: {
+            readonly size: 56;
+            readonly line: 1.1;
+            readonly weight: 700;
+        };
+        readonly h2: {
+            readonly size: 40;
+            readonly line: 1.15;
+            readonly weight: 700;
+        };
+        readonly h3: {
+            readonly size: 24;
+            readonly line: 1.3;
+            readonly weight: 700;
+        };
+        readonly bodyL: {
+            readonly size: 18;
+            readonly line: 1.45;
+            readonly weight: 400;
+        };
+        readonly bodyM: {
+            readonly size: 16;
+            readonly line: 1.5;
+            readonly weight: 400;
+        };
+        readonly bodyMBold: {
+            readonly size: 16;
+            readonly line: 1.5;
+            readonly weight: 700;
+        };
+        readonly eyebrow: {
+            readonly size: 14;
+            readonly line: 1.5;
+            readonly weight: 500;
+        };
+        readonly button: {
+            readonly size: 16;
+            readonly line: 1.5;
+            readonly weight: 500;
+        };
+    };
+};
+declare function isRenderableTree(value: unknown): value is AiLayoutTree;
+
+interface AiTreeRendererProps {
+    tree: AiLayoutTree;
+    brand?: AiBrandKit;
+    /** Resolves a media ref to a URL; null renders a placeholder. */
+    resolveMedia?: (ref: string) => string | null;
+    /**
+     * When set (e.g. `ai.<sectionId>`), text and media elements emit
+     * `data-ohw-key="<prefix>.<path>"` + `data-ohw-editable` markers, making
+     * generated sections click-to-edit and AI-editable like template sections.
+     */
+    editKeyPrefix?: string;
+}
+declare function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }: AiTreeRendererProps): react_jsx_runtime.JSX.Element | null;
+
 type LinkPage = {
     path: string;
     title: string;
@@ -285,4 +424,4 @@ declare function useOhwCarousel(key: string, initial: CarouselSlide[]): {
     bind: Record<string, string>;
 };
 
-export { type CarouselSlide, CustomToolbar, CustomToolbarButton, CustomToolbarDivider, DragHandle, DropIndicator, type DropIndicatorProps, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, ItemActionToolbar, type ItemActionToolbarProps, ItemInteractionLayer, type ItemInteractionLayerProps, type ItemInteractionState, LinkEditorPanel, type LinkModalMode, type LinkModalProps, type LinkPage, LinkPopover, type LinkSection, OhhwellsBridge, SchedulingWidget, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buildTarget, dropIndicatorVariants, filterAvailablePages, getEditModeInitialState, isEditSessionActive, isValidUrl, parseTarget, toggleVariants, useOhwCarousel, validateUrlInput };
+export { AI_DEFAULT_BRAND, AI_TREE_SCHEMA_VERSIONS, AI_TREE_TOKENS, type AiBlockNode, type AiBrandKit, type AiLayoutTree, AiTreeRenderer, type AiTreeRendererProps, type CarouselSlide, CustomToolbar, CustomToolbarButton, CustomToolbarDivider, DragHandle, DropIndicator, type DropIndicatorProps, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, ItemActionToolbar, type ItemActionToolbarProps, ItemInteractionLayer, type ItemInteractionLayerProps, type ItemInteractionState, LinkEditorPanel, type LinkModalMode, type LinkModalProps, type LinkPage, LinkPopover, type LinkSection, OhhwellsBridge, SchedulingWidget, type SectionScaffold, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buildTarget, dropIndicatorVariants, filterAvailablePages, getEditModeInitialState, isEditSessionActive, isRenderableTree, isValidUrl, parseTarget, toggleVariants, useOhwCarousel, validateUrlInput };