@stacksjs/stx/dist/visual-editor.d.ts

A performant UI Framework. Powered by Bun.

/**
 * Generate a hierarchical outline of the template.
 * Used for document outline view in IDEs.
 */
export declare function getTemplateOutline(template: string): OutlineNode;
/**
 * Analyze a template for visual editor purposes
 * (Alias: analyzeTemplateContent)
 */
export declare function analyzeVisualEditorTemplate(template: string): TemplateAnalysis;
/**
 * Analyze a template string and extract all relevant information
 * Use this for analyzing template content directly (not from a file path)
 */
export declare function analyzeTemplateContent(template: string): TemplateAnalysis;
/**
 * Generate preview HTML for a template.
 * This is a simplified preview for editor integration.
 */
export declare function generatePreview(template: string, options?: VisualEditorPreviewOptions): Promise<string>;
/**
 * Get default component palette items.
 */
export declare function getDefaultPalette(): PaletteItem[];
/**
 * Generate insert result for a palette item.
 */
export declare function insertPaletteItem(item: PaletteItem, position: EditorPosition, indentation?: string): InsertResult;
/** Template outline node */
export declare interface OutlineNode {
  type: OutlineNodeType
  name: string
  label: string
  range: { start: number, end: number, line: number, column: number }
  children: OutlineNode[]
  attributes?: Record<string, string | true>
  directiveCategory?: DirectiveCategory
  isClosable?: boolean
  icon?: string
  description?: string
}
/** Template analysis result */
export declare interface TemplateAnalysis {
  variables: VariableUsage[]
  components: ComponentReference[]
  directives: VisualEditorDirectiveUsage[]
  slots: SlotDefinition[]
  sections: SectionDefinition[]
  scripts: ScriptBlock[]
  styles: StyleBlock[]
  layout?: LayoutInfo
  metrics: VisualEditorMetrics
}
/** Variable usage info */
export declare interface VariableUsage {
  name: string
  line: number
  column: number
  context: 'expression' | 'directive' | 'attribute'
  inferredType?: string
}
/** Component reference info */
export declare interface ComponentReference {
  name: string
  path?: string
  line: number
  props: Record<string, string | true>
  hasSlot: boolean
}
/** Visual editor directive usage info */
export declare interface VisualEditorDirectiveUsage {
  name: string
  category: DirectiveCategory
  line: number
  params?: string
  hasEndTag: boolean
}
/** Slot definition */
export declare interface SlotDefinition {
  name: string
  line: number
  isNamed: boolean
  defaultContent?: string
}
/** Section definition */
export declare interface SectionDefinition {
  name: string
  line: number
  content: string
}
/** Script block info */
export declare interface ScriptBlock {
  type: 'typescript' | 'javascript'
  line: number
  content: string
  exports: string[]
}
/** Style block info */
export declare interface StyleBlock {
  type: 'css' | 'scss' | 'less'
  line: number
  content: string
  scoped: boolean
}
/** Layout info */
export declare interface LayoutInfo {
  extends: string
  line: number
  sections: string[]
}
/** Visual editor template complexity metrics */
export declare interface VisualEditorMetrics {
  lines: number
  characters: number
  maxNestingDepth: number
  directiveCount: number
  componentCount: number
  expressionCount: number
  complexity: number
}
/** Visual editor preview options */
export declare interface VisualEditorPreviewOptions {
  context?: Record<string, unknown>
  includeStyles?: boolean
  includeScripts?: boolean
  wrapInDocument?: boolean
  baseUrl?: string
  customCss?: string
}
/** Component palette item */
export declare interface PaletteItem {
  name: string
  displayName: string
  category: string
  description: string
  icon?: string
  snippet: string
  props?: VisualEditorPropDefinition[]
  slots?: string[]
}
/** Visual editor prop definition for palette */
export declare interface VisualEditorPropDefinition {
  name: string
  type: string
  required: boolean
  default?: string
  description?: string
}
/** Editor selection/position */
export declare interface EditorPosition {
  line: number
  column: number
  offset: number
}
/** Insert operation result */
export declare interface InsertResult {
  content: string
  cursorPosition: EditorPosition
}
/**
 * Visual Editor Integration Module
 *
 * Provides APIs for visual template editing in IDEs and editors.
 * This module enables:
 * - Template AST visualization
 * - Component outline/structure view
 * - Drag-and-drop component editing
 * - Live preview support
 * - Template property inspection
 *
 * ## Usage
 *
 * ```typescript
 * import { analyzeTemplate, getTemplateOutline, generatePreview } from 'stx/visual-editor'
 *
 * // Analyze template structure
 * const analysis = analyzeTemplate(templateContent)
 *
 * // Get hierarchical outline
 * const outline = getTemplateOutline(templateContent)
 *
 * // Generate preview HTML
 * const preview = await generatePreview(templateContent, context)
 * ```
 *
 * @module visual-editor
 */
/** Node types in template outline */
export type OutlineNodeType = | 'document'
  | 'element'
  | 'component'
  | 'directive'
  | 'slot'
  | 'section'
  | 'expression'
  | 'script'
  | 'style'
  | 'comment'
  | 'text'
/** Directive category for visual grouping */
export type DirectiveCategory = | 'control-flow'
  | 'loop'
  | 'layout'
  | 'component'
  | 'auth'
  | 'form'
  | 'seo'
  | 'i18n'
  | 'custom'