// Auto-generated from src/ai-service/skills/system/superblocks-frontend/references/embedding.md
// Do not edit directly - edit the .md file instead
export const content = `# Embedding Superblocks Applications

This reference covers embedding Superblocks applications in external websites or portals.

## Embed Hooks

Available hooks from \`@superblocksteam/library\` for embedded applications:

\`\`\`typescript
import { 
  useEmbedProperties,
  useEmbedEvent,
  useEmitEmbedEvent,
} from "@superblocksteam/library";
\`\`\`

### useEmbedProperties

Read properties passed from the embedder (parent application):

\`\`\`typescript
const properties = useEmbedProperties();

// Access custom properties defined in the embed configuration
const { userId, theme, locale } = properties;
\`\`\`

### useEmbedEvent

Listen to events emitted from the embedder:

\`\`\`typescript
useEmbedEvent("refreshData", (payload) => {
  // Handle refresh request from parent
  refetchData();
});

useEmbedEvent("userChanged", (payload) => {
  // Handle user context change
  setCurrentUser(payload.user);
});

useEmbedEvent("themeChanged", (payload) => {
  // Handle theme updates
  setTheme(payload.theme);
});
\`\`\`

### useEmitEmbedEvent

Emit events to the embedder (parent application):

\`\`\`typescript
const emitEvent = useEmitEmbedEvent();

// Notify parent when form is submitted
const handleSubmit = async (data) => {
  await saveData(data);
  emitEvent("formSubmitted", { 
    timestamp: Date.now(), 
    data,
    success: true 
  });
};

// Notify parent of navigation
const handleNavigate = (route) => {
  emitEvent("navigationChanged", { route });
  navigate(route);
};

// Notify parent of errors
const handleError = (error) => {
  emitEvent("errorOccurred", { 
    message: error.message,
    code: error.code 
  });
};
\`\`\`

## Common Embedding Patterns

### Bidirectional Communication

\`\`\`typescript
function EmbeddedDashboard() {
  const properties = useEmbedProperties();
  const emitEvent = useEmitEmbedEvent();
  const [data, setData] = useState(null);

  // Listen for refresh commands from parent
  useEmbedEvent("refresh", () => {
    fetchData();
  });

  // Notify parent when data changes
  const handleDataUpdate = async (newData) => {
    await saveData(newData);
    setData(newData);
    emitEvent("dataUpdated", { data: newData });
  };

  return (
    <Dashboard 
      userId={properties.userId}
      data={data}
      onUpdate={handleDataUpdate}
    />
  );
}
\`\`\`

### Synchronized State

\`\`\`typescript
function EmbeddedForm() {
  const properties = useEmbedProperties();
  const emitEvent = useEmitEmbedEvent();
  const [formState, setFormState] = useState(properties.initialData || {});

  // Sync form state changes to parent
  useEffect(() => {
    emitEvent("formStateChanged", { state: formState });
  }, [formState, emitEvent]);

  // Listen for external state updates
  useEmbedEvent("updateFormState", (payload) => {
    setFormState(prev => ({ ...prev, ...payload }));
  });

  return <Form value={formState} onChange={setFormState} />;
}
\`\`\`

### Loading External Context

\`\`\`typescript
function EmbeddedApp() {
  const properties = useEmbedProperties();
  const { customerId, permissions, branding } = properties;

  // Use embed properties to customize the app
  return (
    <ThemeProvider theme={branding}>
      <CustomerContext.Provider value={{ customerId, permissions }}>
        <AppContent />
      </CustomerContext.Provider>
    </ThemeProvider>
  );
}
\`\`\`
`;
//# sourceMappingURL=embedding.generated.js.map