cyrus-studio 1.0.6 → 1.0.8

package/dist/index.d.ts

@@ -0,0 +1,351 @@
+import React from 'react';
+
+export type CyrusElementType =
+  | 'text'
+  | 'heading'
+  | 'paragraph'
+  | 'button'
+  | 'badge'
+  | 'avatar'
+  | 'icon'
+  | 'image'
+  | 'video'
+  | 'svg'
+  | 'container'
+  | 'box'
+  | 'form'
+  | 'formField'
+  | 'input'
+  | 'textarea'
+  | 'searchBar'
+  | 'select'
+  | 'checkbox'
+  | 'switch'
+  | 'toggleSwitch'
+  | 'navbar'
+  | 'sidebar'
+  | 'bottomNav'
+  | 'tabs'
+  | 'card'
+  | 'metricCard'
+  | 'pricingCard'
+  | 'featureCard'
+  | 'testimonialCard'
+  | 'productCard'
+  | 'hero'
+  | 'heroSection'
+  | 'featureSection'
+  | 'faq'
+  | 'cta'
+  | 'footer'
+  | 'chart'
+  | 'lineChart'
+  | 'barChart'
+  | 'areaChart'
+  | 'pieChart'
+  | 'statCard'
+  | 'kpiCard'
+  | 'metric'
+  | 'table'
+  | 'dataTable'
+  | (string & {});
+
+export interface CyrusIRStyleProperties {
+  width?: string | number;
+  height?: string | number;
+  backgroundColor?: string;
+  backgroundGradient?: string;
+  textColor?: string;
+  fontSize?: number;
+  fontWeight?: string;
+  borderRadius?: number;
+  borderWidth?: number;
+  borderColor?: string;
+  padding?: number;
+  paddingTop?: number;
+  paddingRight?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  opacity?: number;
+  objectFit?: 'cover' | 'contain' | 'fill';
+  shadow?: string;
+  [key: string]: any;
+}
+
+export interface CyrusIRContentProperties {
+  text?: string;
+  title?: string;
+  headline?: string;
+  subhead?: string;
+  subtitle?: string;
+  description?: string;
+  badge?: string;
+  brandName?: string;
+  buttonText?: string;
+  secondaryButtonText?: string;
+  planName?: string;
+  price?: string;
+  value?: string;
+  trend?: string;
+  quote?: string;
+  author?: string;
+  role?: string;
+  imageUrl?: string;
+  src?: string;
+  url?: string;
+  icon?: string;
+  links?: string[];
+  features?: string[];
+  question?: string;
+  answer?: string;
+  rating?: number;
+  [key: string]: any;
+}
+
+export interface CyrusIRElement {
+  id?: string;
+  type: CyrusElementType;
+  name?: string;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  styles?: CyrusIRStyleProperties;
+  content?: CyrusIRContentProperties;
+  children?: CyrusIRElement[];
+}
+
+export interface CyrusIRPage {
+  id?: string;
+  name?: string;
+  slug?: string;
+  backgroundColor?: string;
+  elements: CyrusIRElement[];
+}
+
+export interface CyrusIRDocument {
+  version: '1.0';
+  projectTitle: string;
+  type?: 'webapp' | 'website' | 'dashboard' | 'landing' | 'mobile';
+  theme?: 'light' | 'dark' | 'system';
+  palette?: {
+    primary?: string;
+    secondary?: string;
+    background?: string;
+    surface?: string;
+    text?: string;
+  };
+  pages: CyrusIRPage[];
+}
+
+// ─── 1. MCP Types ──────────────────────────────────────────────────
+export interface CyrusMCPToolDefinition {
+  name: string;
+  description: string;
+  inputSchema: {
+    type: 'object';
+    properties: Record<string, any>;
+    required?: string[];
+  };
+}
+
+export interface CyrusMCPToolCall {
+  id?: string;
+  name: string;
+  arguments: Record<string, any>;
+}
+
+export interface CyrusMCPToolResult {
+  toolCallId?: string;
+  success: boolean;
+  data?: any;
+  error?: string;
+}
+
+export declare const CYRUS_MCP_TOOL_DEFINITIONS: CyrusMCPToolDefinition[];
+export declare function executeCyrusMCPTool(controller: any, toolCall: CyrusMCPToolCall): Promise<CyrusMCPToolResult>;
+
+// ─── 2. Design Token Types ─────────────────────────────────────────
+export interface CyrusDesignTokens {
+  preset?: 'shadcn-zinc' | 'shadcn-slate' | 'shadcn-violet' | 'shadcn-rose' | 'apple-hig' | 'tailwind-cyberpunk' | 'custom';
+  colors?: {
+    primary?: string;
+    primaryForeground?: string;
+    secondary?: string;
+    secondaryForeground?: string;
+    accent?: string;
+    accentForeground?: string;
+    background?: string;
+    foreground?: string;
+    surface?: string;
+    card?: string;
+    cardForeground?: string;
+    muted?: string;
+    mutedForeground?: string;
+    border?: string;
+    ring?: string;
+    [key: string]: string | undefined;
+  };
+  typography?: {
+    fontFamilySans?: string;
+    fontFamilyMono?: string;
+    fontFamilyHeading?: string;
+    baseFontSize?: number;
+    headingScale?: number;
+  };
+  radii?: {
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    full?: number;
+  };
+  shadows?: {
+    sm?: string;
+    md?: string;
+    lg?: string;
+    glow?: string;
+  };
+}
+
+export declare const DESIGN_SYSTEM_PRESETS: Record<string, CyrusDesignTokens>;
+export declare function parseFigmaTokens(rawTokensJson: any): CyrusDesignTokens;
+export declare function importTailwindConfig(tailwindConfig: any): CyrusDesignTokens;
+export declare function exportToCssVariables(tokens: CyrusDesignTokens): string;
+
+// ─── 3. Custom Component Registration ──────────────────────────────
+export interface CyrusCustomComponentDefinition {
+  type: string;
+  title: string;
+  category?: 'custom' | 'ui' | 'data' | 'ecommerce' | 'layout';
+  icon?: string;
+  description?: string;
+  defaultWidth?: number;
+  defaultHeight?: number;
+  defaultStyles?: CyrusIRStyleProperties;
+  defaultContent?: Record<string, any>;
+  schema?: Record<string, any>;
+  renderTemplate?: string;
+}
+
+// ─── 4. Headless Compiler & Preview ────────────────────────────────
+export interface CyrusCompileOptions {
+  framework?: 'react-tailwind' | 'flutter' | 'swiftui' | 'html-css';
+  includeWrapper?: boolean;
+  minify?: boolean;
+}
+
+export interface CyrusHeadlessValidationResult {
+  valid: boolean;
+  document: CyrusIRDocument;
+  elementCount: number;
+  pageCount: number;
+  warnings: string[];
+}
+
+export declare function compileCyrusIR(rawDocument: any, options?: CyrusCompileOptions): string;
+export declare function validateIRHeadless(rawJson: any): CyrusHeadlessValidationResult;
+export declare function renderHeadlessSVG(rawDocument: any, pageIndex?: number, viewportWidth?: number): string;
+
+// ─── 7. White-Labeling & Theming ───────────────────────────────────
+export interface CyrusWhiteLabelConfig {
+  brandName?: string;
+  brandTagline?: string;
+  logoUrl?: string;
+  primaryColor?: string;
+  accentColor?: string;
+  headerBackground?: string;
+  studioBackground?: string;
+  accentGlow?: boolean;
+  hideHeader?: boolean;
+  hideAIPanel?: boolean;
+  hideProperties?: boolean;
+  hideCodeDrawer?: boolean;
+  hideQuickAdd?: boolean;
+  hideLiveTest?: boolean;
+  hideZoomControls?: boolean;
+  customCss?: string;
+  allowedTools?: string[];
+}
+
+export type CyrusHostMessage =
+  | { type: 'CYRUS_SET_DOCUMENT'; payload: CyrusIRDocument }
+  | { type: 'CYRUS_UPDATE_ELEMENT'; payload: { id: string; updates: Partial<CyrusIRElement> } }
+  | { type: 'CYRUS_CREATE_ELEMENT'; payload: { element: CyrusIRElement; select?: boolean } }
+  | { type: 'CYRUS_DELETE_ELEMENT'; payload: { id: string } }
+  | { type: 'CYRUS_SET_THEME'; payload: { theme: 'light' | 'dark' } }
+  | { type: 'CYRUS_SELECT_ELEMENT'; payload: { elementId: string } }
+  | { type: 'CYRUS_GENERATE_FROM_PROMPT'; payload: { prompt: string; provider?: string; apiKey?: string } }
+  | { type: 'CYRUS_MCP_TOOL_CALL'; payload: CyrusMCPToolCall }
+  | { type: 'CYRUS_SET_DESIGN_TOKENS'; payload: CyrusDesignTokens }
+  | { type: 'CYRUS_REGISTER_CUSTOM_COMPONENT'; payload: CyrusCustomComponentDefinition }
+  | { type: 'CYRUS_SET_WHITELABEL_CONFIG'; payload: CyrusWhiteLabelConfig }
+  | { type: 'CYRUS_STREAM_INCREMENTAL_ELEMENTS'; payload: { elements: CyrusIRElement[]; isComplete?: boolean } }
+  | { type: 'CYRUS_REQUEST_CANVAS_SNAPSHOT'; payload?: { format?: 'png' | 'svg' | 'json' } };
+
+export type CyrusCanvasMessage =
+  | { type: 'CYRUS_READY'; payload: { version: string } }
+  | { type: 'CYRUS_STATE_CHANGED'; payload: CyrusIRDocument | { projectId: string; name: string; document: CyrusIRDocument } }
+  | { type: 'CYRUS_CODE_SYNC'; payload: { react: string; html: string; flutter: string; swiftui: string } }
+  | { type: 'CYRUS_SELECTION_CHANGED'; payload: { selectedIds: string[] } }
+  | { type: 'CYRUS_MCP_TOOL_RESULT'; payload: CyrusMCPToolResult }
+  | { type: 'CYRUS_CANVAS_SNAPSHOT_RESPONSE'; payload: { snapshotUrl?: string; svg?: string; document: CyrusIRDocument } }
+  | { type: 'CYRUS_EXPORT_TRIGGERED'; payload: { format: string; code: string } };
+
+export declare function validateAndRepairCyrusIR(rawInput: any, fallbackTitle?: string): CyrusIRDocument;
+export declare function getCyrusLLMSystemPrompt(options?: { type?: string; theme?: 'light' | 'dark' }): string;
+
+export interface CyrusEmbedUrlOptions {
+  projectId?: string;
+  hostUrl?: string;
+  theme?: 'light' | 'dark';
+  readOnly?: boolean;
+  whiteLabel?: CyrusWhiteLabelConfig;
+}
+
+export declare function createCyrusEmbedUrl(options?: CyrusEmbedUrlOptions): string;
+
+export declare function generateReactTailwind(doc: CyrusIRDocument): string;
+export declare function generateHtmlCss(doc: CyrusIRDocument): string;
+export declare function generateFlutter(doc: CyrusIRDocument): string;
+export declare function generateSwiftUI(doc: CyrusIRDocument): string;
+
+export declare class CyrusCanvasController {
+  constructor(iframeWindow?: Window | null, targetOrigin?: string);
+  setIframeWindow(win: Window | null, origin?: string): void;
+  sendMessage(msg: CyrusHostMessage): void;
+  setDocument(doc: CyrusIRDocument): void;
+  setTheme(theme: 'light' | 'dark'): void;
+  selectElement(elementId: string): void;
+  createElement(element: CyrusIRElement, select?: boolean): void;
+  updateStyles(elementId: string, styles: Record<string, any>): void;
+  updateContent(elementId: string, content: Record<string, any>): void;
+  deleteElement(elementId: string): void;
+  setDesignTokens(tokens: CyrusDesignTokens): void;
+  importTailwindTokens(tailwindConfig: any): void;
+  importFigmaTokens(figmaTokensJson: any): void;
+  registerComponent(definition: CyrusCustomComponentDefinition): void;
+  setWhiteLabelConfig(config: CyrusWhiteLabelConfig): void;
+  streamIncrementalElements(elements: CyrusIRElement[], isComplete?: boolean): void;
+  requestCanvasSnapshot(format?: 'svg' | 'json' | 'png'): void;
+  executeMCPTool(toolCall: CyrusMCPToolCall): Promise<CyrusMCPToolResult>;
+  generateFromPrompt(prompt: string, provider?: string, apiKey?: string): void;
+}
+
+export interface CyrusIframeProps extends React.IframeHTMLAttributes<HTMLIFrameElement> {
+  projectId?: string;
+  hostUrl?: string;
+  theme?: 'light' | 'dark';
+  initialDocument?: CyrusIRDocument;
+  whiteLabel?: CyrusWhiteLabelConfig;
+  designTokens?: CyrusDesignTokens;
+  customComponents?: CyrusCustomComponentDefinition[];
+  onReady?: (info: { version: string }) => void;
+  onStateChange?: (doc: CyrusIRDocument) => void;
+  onCodeSync?: (code: { react: string; html: string; flutter: string; swiftui: string }) => void;
+  onSelectionChange?: (selectedIds: string[]) => void;
+  onMCPToolResult?: (result: CyrusMCPToolResult) => void;
+  controllerRef?: React.MutableRefObject<CyrusCanvasController | null>;
+}
+
+export declare function CyrusCanvasIframe(props: CyrusIframeProps): React.ReactElement;

package/dist/index.js

@@ -0,0 +1,41 @@
+import React from 'react';
+export * from './protocol.js';
+/**
+ * Generates an embeddable Cyrus studio URL from a project ID or custom host.
+ */
+export function createCyrusEmbedUrl(options = {}) {
+    const host = options.hostUrl || 'http://localhost:5173';
+    const pid = options.projectId || 'demo';
+    const theme = options.theme || 'light';
+    return `${host}/#/embed/${pid}?theme=${theme}&readOnly=${Boolean(options.readOnly)}`;
+}
+/**
+ * React Component to embed the Cyrus Visual Canvas Studio in any web app.
+ */
+export function CyrusCanvasIframe({ projectId = 'demo', hostUrl = 'http://localhost:5173', theme = 'light', onStateChange, style, className, ...rest }) {
+    const embedUrl = createCyrusEmbedUrl({ projectId, hostUrl, theme });
+    React.useEffect(() => {
+        if (!onStateChange || typeof window === 'undefined')
+            return;
+        const handleMessage = (event) => {
+            if (event.data && event.data.type === 'CYRUS_STATE_CHANGED') {
+                onStateChange(event.data.payload);
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, [onStateChange]);
+    return React.createElement('iframe', {
+        src: embedUrl,
+        className: className || 'w-full h-full border-0 rounded-2xl shadow-lg',
+        style: {
+            width: '100%',
+            height: '600px',
+            border: 'none',
+            borderRadius: '16px',
+            ...style,
+        },
+        title: 'Cyrus Visual Canvas Studio',
+        ...rest,
+    });
+}