@fabio.caffarello/react-design-system 1.7.0 → 1.9.0

package/dist/ui/playgrounds/components/StartComponents/features/FeatureRegistry.d.ts

@@ -0,0 +1,65 @@
+import type { FeatureId, FeatureDefinition, StartComponentDefinition } from '../types';
+/**
+ * Feature Registry
+ *
+ * Singleton that manages enabled features and filters components accordingly.
+ * Initially only "home" is enabled.
+ */
+declare class FeatureRegistry {
+    private enabledFeatures;
+    /**
+     * Enable a feature
+     */
+    enableFeature(featureId: FeatureId): void;
+    /**
+     * Disable a feature
+     * Note: "home" cannot be disabled as it's the base feature
+     */
+    disableFeature(featureId: FeatureId): void;
+    /**
+     * Toggle feature enabled state
+     */
+    toggleFeature(featureId: FeatureId): void;
+    /**
+     * Check if feature is enabled
+     */
+    isEnabled(featureId: FeatureId): boolean;
+    /**
+     * Get all enabled feature IDs
+     */
+    getEnabledFeatureIds(): FeatureId[];
+    /**
+     * Get all enabled features with their definitions
+     */
+    getEnabledFeatures(): FeatureDefinition[];
+    /**
+     * Get all disabled features
+     */
+    getDisabledFeatures(): FeatureDefinition[];
+    /**
+     * Filter components by enabled features
+     *
+     * A component is included if at least one of its features is enabled.
+     */
+    filterComponentsByFeatures(components: StartComponentDefinition[]): StartComponentDefinition[];
+    /**
+     * Check if a component is available based on enabled features
+     */
+    isComponentAvailable(componentId: string): boolean;
+    /**
+     * Get available features for a component
+     * Returns only the features that are currently enabled
+     */
+    getAvailableFeaturesForComponent(componentId: string): FeatureDefinition[];
+    /**
+     * Set enabled features from array
+     * Always ensures "home" is included
+     */
+    setEnabledFeatures(featureIds: FeatureId[]): void;
+    /**
+     * Reset to default state (only "home" enabled)
+     */
+    reset(): void;
+}
+export declare const featureRegistry: FeatureRegistry;
+export {};

package/dist/ui/playgrounds/components/StartComponents/features/featureDefinitions.d.ts

@@ -0,0 +1,31 @@
+import type { FeatureId, FeatureDefinition } from '../types';
+/**
+ * Feature Definitions
+ *
+ * Defines all available features in the application.
+ * Initially only "home" is enabled.
+ */
+export declare const FEATURE_DEFINITIONS: Record<FeatureId, FeatureDefinition>;
+/**
+ * Component to Feature Mapping
+ *
+ * Maps component IDs to the features they belong to.
+ * A component is available when at least one of its features is enabled.
+ */
+export declare const COMPONENT_FEATURE_MAP: Record<string, FeatureId[]>;
+/**
+ * Get all feature definitions
+ */
+export declare function getAllFeatures(): FeatureDefinition[];
+/**
+ * Get feature definition by ID
+ */
+export declare function getFeatureDefinition(featureId: FeatureId): FeatureDefinition | undefined;
+/**
+ * Get features for a component
+ */
+export declare function getFeaturesForComponent(componentId: string): FeatureId[];
+/**
+ * Check if component belongs to a feature
+ */
+export declare function componentBelongsToFeature(componentId: string, featureId: FeatureId): boolean;

package/dist/ui/playgrounds/components/StartComponents/features/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Features Module
+ *
+ * Exports feature definitions and registry for feature-based component filtering.
+ */
+export { FEATURE_DEFINITIONS, COMPONENT_FEATURE_MAP, getAllFeatures, getFeatureDefinition, getFeaturesForComponent, componentBelongsToFeature, } from './featureDefinitions';
+export { featureRegistry } from './FeatureRegistry';

package/dist/ui/playgrounds/components/StartComponents/index.d.ts

@@ -0,0 +1,10 @@
+export * from './types';
+export { ComponentConfigDrawer } from './ComponentConfigDrawer';
+export type { ComponentConfigDrawerProps } from './ComponentConfigDrawer';
+export { SchemaFieldRenderer } from './drawer';
+export { START_COMPONENTS_CATALOG, getRequiredComponents, getOptionalComponents, getComponentDefinition, getComponentDefinitionByName, getComponentsByFeature, getAvailableComponents, getAvailableRequiredComponents, getAvailableOptionalComponents, getComponentsForSlot, getAvailableComponentsForSlot, getComponentsProvidingSlot, getComponentsByCategory, getCategoriesWithComponents, getComponentsByTag, getAllTags, } from './StartComponentsCatalog';
+export * from './schemas';
+export { FEATURE_DEFINITIONS, COMPONENT_FEATURE_MAP, getAllFeatures, getFeatureDefinition, getFeaturesForComponent, componentBelongsToFeature, featureRegistry, } from './features';
+export { SLOT_DEFINITIONS, getSlotDefinition, getAllSlots, canPlaceInSlot, getAvailableSlotsForComponent, getChildSlots, getRootSlots, slotRegistry, } from './slots';
+export { startComponentRegistry, registerStartComponents, initializeFeatures, areRegistriesInitialized, } from './registry';
+export { StartComponentFactory } from './factory/StartComponentFactory';

package/dist/ui/playgrounds/components/StartComponents/preview/ComponentRenderer.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { FeatureComponent } from '../../../../tools/AppBuilder/types';
+export interface StartComponentRendererProps {
+    component: FeatureComponent;
+    onSelect?: (componentId: string) => void;
+    onComponentClick?: (component: FeatureComponent) => void;
+    isSelected?: boolean;
+    isHovered?: boolean;
+    onHover?: (componentId: string) => void;
+    onLeave?: () => void;
+    depth?: number;
+}
+/**
+ * StartComponentRenderer
+ *
+ * Renders Start Components (SideNavbar, Container, etc.) recursively.
+ * Handles special cases for compound components like SideNavbar.
+ */
+declare function StartComponentRendererComponent({ component, onSelect, onComponentClick, isSelected, isHovered, onHover, onLeave, depth, }: StartComponentRendererProps): import("react/jsx-runtime").JSX.Element;
+export declare const StartComponentRenderer: React.MemoExoticComponent<typeof StartComponentRendererComponent>;
+export {};

package/dist/ui/playgrounds/components/StartComponents/preview/LiveStartComponentsPreview.d.ts

@@ -0,0 +1,18 @@
+import type { AppConfig } from '../../../../tools/AppBuilder/types';
+import type { SlotId } from '../../StartComponents';
+import { useSyncManager } from '../shared';
+export interface LiveStartComponentsPreviewProps {
+    appConfig: AppConfig;
+    selectedComponentId?: string;
+    onComponentSelect?: (id: string) => void;
+    highlightSlots?: SlotId[];
+    showSlotIndicators?: boolean;
+    syncManager?: ReturnType<typeof useSyncManager>;
+}
+/**
+ * LiveStartComponentsPreview
+ *
+ * Renders actual Start Components from the design system based on appConfig.
+ * Uses AppProvider for context and renders real components (not mockups).
+ */
+export declare function LiveStartComponentsPreview({ appConfig, selectedComponentId, onComponentSelect, highlightSlots, showSlotIndicators, syncManager, }: LiveStartComponentsPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/playgrounds/components/StartComponents/preview/SlotHighlighter.d.ts

@@ -0,0 +1,14 @@
+import type { SlotId } from '../../StartComponents';
+export interface SlotHighlighterProps {
+    highlightSlots?: SlotId[];
+    showIndicators?: boolean;
+    containerRef?: React.RefObject<HTMLElement>;
+    componentRefs?: Map<string, React.RefObject<HTMLElement>>;
+}
+/**
+ * SlotHighlighter
+ *
+ * Overlay component that highlights slots visually.
+ * Shows available slots, occupied slots, and placement indicators.
+ */
+export declare function SlotHighlighter({ highlightSlots, showIndicators, containerRef, componentRefs, }: SlotHighlighterProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/playgrounds/components/StartComponents/preview/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { usePreviewSync } from './usePreviewSync';
+export type { UsePreviewSyncOptions, UsePreviewSyncReturn } from './usePreviewSync';
+export { usePreviewInteractivity } from './usePreviewInteractivity';
+export type { UsePreviewInteractivityOptions, UsePreviewInteractivityReturn } from './usePreviewInteractivity';

package/dist/ui/playgrounds/components/StartComponents/preview/hooks/usePreviewInteractivity.d.ts

@@ -0,0 +1,19 @@
+import type { FeatureComponent } from '../../../../tools/AppBuilder/types';
+export interface UsePreviewInteractivityOptions {
+    onComponentSelect?: (id: string) => void;
+    onComponentClick?: (component: FeatureComponent) => void;
+}
+export interface UsePreviewInteractivityReturn {
+    hoveredComponentId: string | null;
+    setHoveredComponent: (id: string | null) => void;
+    handleComponentHover: (componentId: string) => void;
+    handleComponentLeave: () => void;
+    handleComponentClick: (component: FeatureComponent) => void;
+}
+/**
+ * usePreviewInteractivity
+ *
+ * Hook for managing interactive behavior in preview.
+ * Handles hover, click, and selection states.
+ */
+export declare function usePreviewInteractivity({ onComponentSelect, onComponentClick, }: UsePreviewInteractivityOptions): UsePreviewInteractivityReturn;

package/dist/ui/playgrounds/components/StartComponents/preview/hooks/usePreviewSync.d.ts

@@ -0,0 +1,20 @@
+import type { AppConfig } from '../../../../tools/AppBuilder/types';
+export interface UsePreviewSyncOptions {
+    appConfig: AppConfig;
+    selectedComponentId?: string;
+    onComponentSelect?: (id: string) => void;
+    onSlotHighlight?: (slotIds: string[]) => void;
+}
+export interface UsePreviewSyncReturn {
+    syncToSlot: (componentId: string) => void;
+    syncFromSlot: (componentId: string) => void;
+    highlightComponent: (componentId: string) => void;
+    clearHighlight: () => void;
+}
+/**
+ * usePreviewSync
+ *
+ * Hook for synchronizing preview state with slot state.
+ * Handles bidirectional sync between preview and slot selection.
+ */
+export declare function usePreviewSync({ appConfig, selectedComponentId, onComponentSelect, onSlotHighlight, }: UsePreviewSyncOptions): UsePreviewSyncReturn;

package/dist/ui/playgrounds/components/StartComponents/preview/index.d.ts

@@ -0,0 +1,7 @@
+export { StartComponentRenderer } from './ComponentRenderer';
+export type { StartComponentRendererProps } from './ComponentRenderer';
+export { LiveStartComponentsPreview } from './LiveStartComponentsPreview';
+export type { LiveStartComponentsPreviewProps } from './LiveStartComponentsPreview';
+export { SlotHighlighter } from './SlotHighlighter';
+export type { SlotHighlighterProps } from './SlotHighlighter';
+export * from './hooks';

package/dist/ui/playgrounds/components/StartComponents/registry/StartComponentRegistry.d.ts

@@ -0,0 +1,31 @@
+import { BaseRegistry } from '../../../../shared/patterns/BaseRegistry';
+import type { StartComponentDefinition } from '../types';
+/**
+ * Start Component Registry
+ *
+ * Registry for Start Component definitions.
+ * Manages catalog of available components (required and optional).
+ */
+declare class StartComponentRegistry extends BaseRegistry<StartComponentDefinition> {
+    constructor();
+    protected generateEntryId(entry: StartComponentDefinition): string;
+    protected validateEntry(entry: StartComponentDefinition): void;
+    /**
+     * Get component definition by component name
+     */
+    getByName(componentName: string): StartComponentDefinition | undefined;
+    /**
+     * Get all required components
+     */
+    getRequired(): StartComponentDefinition[];
+    /**
+     * Get all optional components
+     */
+    getOptional(): StartComponentDefinition[];
+    /**
+     * Get components by category
+     */
+    getByCategory(category: StartComponentDefinition['category']): StartComponentDefinition[];
+}
+export declare const startComponentRegistry: StartComponentRegistry;
+export {};

package/dist/ui/playgrounds/components/StartComponents/registry/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Registry Module
+ *
+ * Exports registry and initialization functions for Start Components.
+ */
+export { startComponentRegistry } from './StartComponentRegistry';
+export { registerStartComponents, initializeFeatures, areRegistriesInitialized, } from './registerDefaults';

package/dist/ui/playgrounds/components/StartComponents/registry/registerDefaults.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Register all default Start Components in the registry.
+ * Initializes all registries (components, slots, features).
+ * Should be called once during application initialization.
+ */
+export declare function registerStartComponents(): void;
+/**
+ * Initialize feature registry with specific features enabled
+ * @param enabledFeatures Array of feature IDs to enable
+ */
+export declare function initializeFeatures(enabledFeatures: string[]): void;
+/**
+ * Check if all registries are initialized
+ */
+export declare function areRegistriesInitialized(): boolean;

package/dist/ui/playgrounds/components/StartComponents/schemas/card.schema.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropSchema } from '../types';
+/**
+ * Card Prop Schema
+ *
+ * Schema for configuring the Card component.
+ * Groups: appearance, spacing, behavior
+ */
+export declare const cardPropSchema: ComponentPropSchema;

package/dist/ui/playgrounds/components/StartComponents/schemas/container.schema.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropSchema } from '../types';
+/**
+ * Container Prop Schema
+ *
+ * Schema for configuring the Container component.
+ * Groups: layout, spacing
+ */
+export declare const containerPropSchema: ComponentPropSchema;

package/dist/ui/playgrounds/components/StartComponents/schemas/footer.schema.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropSchema } from '../types';
+/**
+ * Footer Prop Schema
+ *
+ * Schema for configuring the Footer component.
+ * Groups: appearance, layout
+ */
+export declare const footerPropSchema: ComponentPropSchema;

package/dist/ui/playgrounds/components/StartComponents/schemas/header.schema.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropSchema } from '../types';
+/**
+ * Header Prop Schema
+ *
+ * Schema for configuring the Header component.
+ * Groups: appearance, layout, behavior
+ */
+export declare const headerPropSchema: ComponentPropSchema;

package/dist/ui/playgrounds/components/StartComponents/schemas/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Start Components Schemas
+ *
+ * Exports all component prop schemas for schema-driven configuration.
+ */
+export { sideNavbarPropSchema } from './sideNavbar.schema';
+export { containerPropSchema } from './container.schema';
+export { cardPropSchema } from './card.schema';
+export { headerPropSchema } from './header.schema';
+export { footerPropSchema } from './footer.schema';

package/dist/ui/playgrounds/components/StartComponents/schemas/sideNavbar.schema.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropSchema } from '../types';
+/**
+ * SideNavbar Prop Schema
+ *
+ * Schema for configuring the SideNavbar component.
+ * Groups: dimensions, appearance, behavior, responsive, state, controls
+ */
+export declare const sideNavbarPropSchema: ComponentPropSchema;

package/dist/ui/playgrounds/components/StartComponents/shared/SyncManager.d.ts

@@ -0,0 +1,36 @@
+import type { AppConfig, FeatureComponent } from '../../../../tools/AppBuilder/types';
+import type { SlotId } from '../StartComponents';
+export interface SyncState {
+    selectedComponentId: string | null;
+    hoveredComponentId: string | null;
+    highlightedSlots: SlotId[];
+    lastUpdate: number;
+}
+export interface SyncCallbacks {
+    onComponentSelect?: (componentId: string | null) => void;
+    onComponentHover?: (componentId: string | null) => void;
+    onSlotHighlight?: (slotIds: SlotId[]) => void;
+    onAppConfigChange?: (config: AppConfig) => void;
+}
+export interface UseSyncManagerOptions {
+    appConfig: AppConfig | null;
+    callbacks?: SyncCallbacks;
+    debounceMs?: number;
+}
+export interface UseSyncManagerReturn {
+    syncState: SyncState;
+    selectComponent: (componentId: string | null) => void;
+    hoverComponent: (componentId: string | null) => void;
+    highlightSlots: (slotIds: SlotId[]) => void;
+    findComponentSlot: (componentId: string) => SlotId | null;
+    findSlotComponents: (slotId: SlotId) => FeatureComponent[];
+    clearSelection: () => void;
+    clearHighlight: () => void;
+}
+/**
+ * SyncManager
+ *
+ * Manages bidirectional synchronization between slot and preview.
+ * Handles component selection, hover states, and slot highlighting.
+ */
+export declare function useSyncManager({ appConfig, callbacks, debounceMs, }: UseSyncManagerOptions): UseSyncManagerReturn;

package/dist/ui/playgrounds/components/StartComponents/shared/Tooltip.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactElement;
+    delay?: number;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Tooltip
+ *
+ * Accessible tooltip component with keyboard support.
+ */
+export declare function Tooltip({ content, children, delay, placement, disabled, className, }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/playgrounds/components/StartComponents/shared/animations.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Animation utilities and constants for Start Components
+ */
+export declare const ANIMATION_DURATION: {
+    readonly fast: "150ms";
+    readonly normal: "200ms";
+    readonly slow: "300ms";
+    readonly slower: "500ms";
+};
+export declare const ANIMATION_EASING: {
+    readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
+    readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)";
+    readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+    readonly spring: "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
+};
+/**
+ * Common animation classes
+ */
+export declare const ANIMATION_CLASSES: {
+    readonly fadeIn: "animate-[fadeIn_200ms_ease-in-out]";
+    readonly fadeOut: "animate-[fadeOut_200ms_ease-in-out]";
+    readonly slideInFromTop: "animate-[slideInFromTop_300ms_ease-out]";
+    readonly slideInFromBottom: "animate-[slideInFromBottom_300ms_ease-out]";
+    readonly slideInFromLeft: "animate-[slideInFromLeft_300ms_ease-out]";
+    readonly slideInFromRight: "animate-[slideInFromRight_300ms_ease-out]";
+    readonly scaleIn: "animate-[scaleIn_200ms_ease-out]";
+    readonly scaleOut: "animate-[scaleOut_200ms_ease-out]";
+    readonly transitionAll: "transition-all duration-200 ease-in-out";
+    readonly transitionColors: "transition-colors duration-150 ease-in-out";
+    readonly transitionTransform: "transition-transform duration-200 ease-out";
+    readonly transitionOpacity: "transition-opacity duration-150 ease-in-out";
+    readonly hoverScale: "hover:scale-105 transition-transform duration-200 ease-out";
+    readonly hoverLift: "hover:-translate-y-1 transition-transform duration-200 ease-out";
+    readonly focusRing: "focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-150";
+};
+/**
+ * Keyframe animations (to be added to global CSS or Tailwind config)
+ */
+export declare const KEYFRAME_ANIMATIONS = "\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes fadeOut {\n  from { opacity: 1; }\n  to { opacity: 0; }\n}\n\n@keyframes slideInFromTop {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideInFromBottom {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideInFromLeft {\n  from {\n    opacity: 0;\n    transform: translateX(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideInFromRight {\n  from {\n    opacity: 0;\n    transform: translateX(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes scaleIn {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes scaleOut {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n";
+/**
+ * Get animation style object for inline styles
+ */
+export declare function getAnimationStyle(duration?: keyof typeof ANIMATION_DURATION, easing?: keyof typeof ANIMATION_EASING): React.CSSProperties;

package/dist/ui/playgrounds/components/StartComponents/shared/index.d.ts

@@ -0,0 +1,10 @@
+export { useSyncManager } from './SyncManager';
+export type { SyncState, SyncCallbacks, UseSyncManagerOptions, UseSyncManagerReturn, } from './SyncManager';
+export { useKeyboardShortcuts } from './useKeyboardShortcuts';
+export type { KeyboardShortcut, UseKeyboardShortcutsOptions } from './useKeyboardShortcuts';
+export { useTooltip } from './useTooltip';
+export type { UseTooltipOptions, UseTooltipReturn } from './useTooltip';
+export { Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip';
+export { useAccessibility } from './useAccessibility';
+export type { UseAccessibilityOptions, UseAccessibilityReturn } from './useAccessibility';

package/dist/ui/playgrounds/components/StartComponents/shared/useAccessibility.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Hook for managing accessibility features
+ */
+export interface UseAccessibilityOptions {
+    /**
+     * Announce messages to screen readers
+     */
+    announce?: (message: string, priority?: 'polite' | 'assertive') => void;
+    /**
+     * Whether the component is interactive
+     */
+    interactive?: boolean;
+    /**
+     * Component label for screen readers
+     */
+    label?: string;
+    /**
+     * Component description for screen readers
+     */
+    description?: string;
+}
+export interface UseAccessibilityReturn {
+    /**
+     * ARIA props for the component
+     */
+    ariaProps: {
+        role?: string;
+        'aria-label'?: string;
+        'aria-describedby'?: string;
+        'aria-live'?: 'polite' | 'assertive' | 'off';
+        'aria-atomic'?: boolean;
+        tabIndex?: number;
+    };
+    /**
+     * Announce a message to screen readers
+     */
+    announce: (message: string, priority?: 'polite' | 'assertive') => void;
+    /**
+     * Focus management
+     */
+    focusRef: React.RefObject<HTMLElement>;
+    /**
+     * Focus the element
+     */
+    focus: () => void;
+}
+/**
+ * useAccessibility
+ *
+ * Hook for managing accessibility features including screen reader announcements,
+ * ARIA attributes, and focus management.
+ */
+export declare function useAccessibility({ announce: externalAnnounce, interactive, label, description, }?: UseAccessibilityOptions): UseAccessibilityReturn;

package/dist/ui/playgrounds/components/StartComponents/shared/useKeyboardShortcuts.d.ts

@@ -0,0 +1,19 @@
+export interface KeyboardShortcut {
+    key: string;
+    ctrl?: boolean;
+    shift?: boolean;
+    alt?: boolean;
+    action: () => void;
+    description?: string;
+}
+export interface UseKeyboardShortcutsOptions {
+    shortcuts: KeyboardShortcut[];
+    enabled?: boolean;
+}
+/**
+ * useKeyboardShortcuts
+ *
+ * Hook for managing keyboard shortcuts in Start Components slot/preview.
+ * Supports Ctrl/Cmd, Shift, and Alt modifiers.
+ */
+export declare function useKeyboardShortcuts({ shortcuts, enabled, }: UseKeyboardShortcutsOptions): void;

package/dist/ui/playgrounds/components/StartComponents/shared/useTooltip.d.ts

@@ -0,0 +1,21 @@
+export interface UseTooltipOptions {
+    delay?: number;
+    disabled?: boolean;
+}
+export interface UseTooltipReturn {
+    isVisible: boolean;
+    show: () => void;
+    hide: () => void;
+    tooltipProps: {
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+        onFocus: () => void;
+        onBlur: () => void;
+    };
+}
+/**
+ * useTooltip
+ *
+ * Hook for managing tooltip visibility with delay.
+ */
+export declare function useTooltip({ delay, disabled }?: UseTooltipOptions): UseTooltipReturn;

package/dist/ui/playgrounds/components/StartComponents/slots/SlotRegistry.d.ts

@@ -0,0 +1,81 @@
+import type { SlotId, StartComponentInstance } from '../types';
+/**
+ * Slot Registry
+ *
+ * Manages runtime slot state and component placement.
+ * Tracks which components are placed in which slots and enforces constraints.
+ */
+declare class SlotRegistry {
+    private slotContents;
+    constructor();
+    /**
+     * Initialize slots with empty arrays
+     */
+    initialize(): void;
+    /**
+     * Place a component in a slot
+     *
+     * @returns true if placement was successful, false otherwise
+     */
+    placeComponent(slotId: SlotId, component: StartComponentInstance): boolean;
+    /**
+     * Remove a component from a slot
+     *
+     * @returns true if removal was successful, false otherwise
+     */
+    removeComponent(slotId: SlotId, componentId: string): boolean;
+    /**
+     * Remove a component from any slot it's in
+     */
+    removeComponentFromAnySlot(componentId: string): boolean;
+    /**
+     * Get components in a slot
+     */
+    getSlotContents(slotId: SlotId): StartComponentInstance[];
+    /**
+     * Get a specific component from a slot
+     */
+    getComponent(slotId: SlotId, componentId: string): StartComponentInstance | undefined;
+    /**
+     * Find which slot a component is in
+     */
+    findComponentSlot(componentId: string): SlotId | undefined;
+    /**
+     * Check if slot has available space
+     */
+    hasSpace(slotId: SlotId): boolean;
+    /**
+     * Check if slot is empty
+     */
+    isEmpty(slotId: SlotId): boolean;
+    /**
+     * Check if slot is full
+     */
+    isFull(slotId: SlotId): boolean;
+    /**
+     * Get count of components in a slot
+     */
+    getCount(slotId: SlotId): number;
+    /**
+     * Get all components across all slots
+     */
+    getAllComponents(): Map<SlotId, StartComponentInstance[]>;
+    /**
+     * Clear all slots
+     */
+    clear(): void;
+    /**
+     * Clear a specific slot
+     */
+    clearSlot(slotId: SlotId): void;
+    /**
+     * Update a component's props in place
+     */
+    updateComponent(slotId: SlotId, componentId: string, newProps: Record<string, unknown>): boolean;
+    /**
+     * Bulk load slot contents (for initialization)
+     */
+    loadContents(contents: Map<SlotId, StartComponentInstance[]>): void;
+}
+export declare const slotRegistry: SlotRegistry;
+export {};

package/dist/ui/playgrounds/components/StartComponents/slots/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Slots Module
+ *
+ * Exports slot definitions and registry for predefined component placement.
+ */
+export { SLOT_DEFINITIONS, getSlotDefinition, getAllSlots, canPlaceInSlot, getAvailableSlotsForComponent, getChildSlots, getRootSlots, } from './slotDefinitions';
+export { slotRegistry } from './SlotRegistry';