# Bluepic Embed & Component Library

A UI library for visual template editing – usable either as a **simple script embed** or via **modular Vue components**.

## 🔹 Script Embedding (`<script>` without build)

### Example

```html
<head>
  <!-- ... -->
  <link rel="stylesheet" href="https://unpkg.com/@bluepic/embed@0.1.3/lib/style.css" />
  <!-- ... -->
</head>

<body>
  <!-- ... -->

  <!-- The embed app wrapper element -->
  <div id="bluepic-embed"></div>

  <!-- Important: vue3 and @bluepic/embed -->
  <script src="https://unpkg.com/vue@3.5.13/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/@bluepic/embed@0.1.3/lib/bluepic-fields.umd.js"></script>
  <script>
    // Wait for window to load
    window.addEventListener('load', () => {
      // Initialize embed instance
      const embed = new BluepicFields.BluepicEmbed('#bluepic-embed', 'TEMPLATE_ID', {
        initData: { foo: 'bar' },
        displayMode: 'stack',
        darkmode: true,
      });

      embed.addEventListener('ready', (event) => {
        console.log('Editor ready', event.detail);
      });

      embed.addEventListener('data', (event) => {
        console.log('Data changed', event.detail.data);
      });
    });
  </script>
</body>
```

### Constructor

```ts
new BluepicEmbed(
  selectorOrElement: string | HTMLElement,
  templateId: string,
  options?: {
    initData?: Record<string, unknown>;
    displayMode?: 'auto' | 'mobile' | 'stack';
    allowPanAndZoom?: boolean;
    darkmode?: boolean;
    studioResourcesBaseUrl?: string;
    cloudflarePagesHostname?: string;
    theme?: BluepicEmbeddedEditorThemeConfig;
    bxCoreVersion?: string;
    publishedSlug?: string;
  }
);
```

### Public Methods

```ts
embed.setVariable(key: string, value: unknown): void;
embed.setData(data: Record<string, unknown>, forceOverwrite?: boolean): void;
```

### Events

- `ready`: Fired when the editor is fully initialized
- `data`: Fired when `data` changes (`event.detail.data`)

---

## 🔸 Vue Components (modular usage)

### 📦 Installation

```bash
npm install bluepic
```

### Main Imports

```ts
import { BluepicEmbeddedEditor, BxFields, createPopup, BluepicEmbed, BluepicFieldComponents } from '@bluepic/embed';
```

### `BluepicEmbeddedEditor`

The main component for visual editing.

```vue
<template>
  <bluepic-embedded-editor
    v-model:data="data"
    :template-id="templateId"
    inline
    :display-mode="'auto'"
    :zoom-and-pan="false"
    v-model:ready="ready"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const templateId = 'TEMPLATE_ID';
const data = ref({});
const ready = ref(false);
</script>
```

---

## 🧩 `createPopup(options)`

Shows a modal popup overlay.

```ts
const popup = createPopup({
  title: 'Confirm',
  content: 'Do you want to continue?',
  actions: [
    {
      label: 'OK',
      icon: () => h(BxIcon, { name: 'check' }),
      props: { variant: 'primary' },
    },
  ],
  darkmode: true,
});
```

```ts
popup.close(); // Programmatically close the popup
```
