// Example composition structure
{
  uuid: "comp-123",
  name: "UserCard",
  category: "ui",
  elements: [
    {
      type: "Flex",
      properties: { direction: "column" },
      children: [
        { type: "Text", properties: { text: "Username" } },
        { type: "Button", properties: { label: "View Profile" } }
      ]
    }
  ],
  styles: {
    default: { padding: "16px" },
    sm: { padding: "12px" },
    md: { padding: "16px" },
    lg: { padding: "20px" }
  }
}

// CompositionInstance structure
{
  type: "CompositionInstance",
  uuid: "instance-456",
  properties: {
    compositionId: "comp-123",
    overrides: {
      // Per-instance style overrides
      "element-789": {
        styles: {
          default: { backgroundColor: "blue" }
        }
      }
    }
  }
}

// Example: UserCard composition contains Avatar composition
UserCard (Level 1)
└── Flex
    ├── Avatar (Level 2) <- Another composition
    │   └── Image
    └── Text

{
  type: "CompositionInstance",
  properties: {
    compositionId: "user-card",
    overrides: {
      "button-123": {
        styles: {
          default: { backgroundColor: "#007bff" },
          sm: { fontSize: "14px" }
        }
      }
    }
  }
}

// Before expansion
{
  type: "CompositionInstance",
  properties: { compositionId: "comp-123" }
}

// After expansion (server-side)
{
  type: "Flex",
  uuid: "instance-456-element-789", // Prefixed with instance UUID
  properties: { direction: "column" },
  children: [...]
}

// This is prevented:
Composition A contains Composition B
Composition B contains Composition A
// ❌ Error: "Circular reference detected"

// Original binding in composition
{
  id: "binding-1",
  elementId: "button-123",
  eventType: "click",
  functionId: "func-456"
}

// Expanded binding in instance
{
  id: "instance-789-binding-1",
  elementId: "instance-789-button-123",
  eventType: "click",
  functionId: "func-456"
}

CREATE TABLE lowcode_studio.compositions (
  uuid UUID PRIMARY KEY,
  project_id TEXT NOT NULL,
  name VARCHAR(255) NOT NULL,
  category VARCHAR(100),
  description TEXT,
  icon VARCHAR(50),
  elements JSONB NOT NULL DEFAULT '[]',
  properties JSONB,
  styles JSONB,
  order INTEGER DEFAULT 0,
  created_at BIGINT DEFAULT extract(epoch from now()) * 1000,
  updated_at BIGINT,
  deleted_at BIGINT
);

CREATE INDEX idx_compositions_project
  ON lowcode_studio.compositions(project_id);