@lovable-widgets/core 0.1.0 → 1.0.1

package/README.md

@@ -0,0 +1,27 @@
+# @lovable-widgets/core
+
+The official SDK for building Lovable-compatible widgets.
+
+## Install
+```bash
+npm install @lovable-widgets/core
+```
+
+## Usage
+```tsx
+import { createWidget, WidgetCard, WidgetHeader, WidgetButton } from '@lovable-widgets/core';
+import '@lovable-widgets/core/styles.css';
+
+const MyWidgetInner = ({ title }) => (
+  <WidgetCard>
+    <WidgetHeader title={title} />
+    <WidgetButton>Click me</WidgetButton>
+  </WidgetCard>
+);
+
+export default createWidget({
+  meta: { name: 'my-widget', version: '1.0.0', description: '...', author: '...', category: 'ui', tags: [] },
+  component: MyWidgetInner,
+  propDefs: [{ name: 'title', type: 'string', required: true, description: 'Widget title' }],
+}).component;
+```

package/dist/index.d.ts

@@ -1,9 +1,19 @@
-export { createWidget } from './createWidget';
-export { useWidgetContext } from './context';
-export { useWidgetTheme, useWidgetId, useWidgetSecrets, useWidgetStatus, useWidgetEmit, useWidgetListener } from './hooks';
-export { registerWidget, getWidget, listWidgets, unregisterWidget, clearRegistry } from './registry';
-export { emitWidgetEvent, onWidgetEvent } from './events';
-export { WidgetErrorBoundary } from './errorBoundary';
-export { provideSecrets } from './provideSecrets';
-export { mountWidget, unmountWidget } from './mount';
-export type { WidgetSecretDef, WidgetMeta, WidgetConfig, WidgetPropDef, WidgetDefinition, CreateWidgetConfig, WidgetLifecycle, ThemeTokens, WidgetContextValue, WidgetEventType, WidgetEvent } from './types';
+import { ComponentType, ForwardRefExoticComponent, ReactNode, HTMLAttributes, ButtonHTMLAttributes } from 'react';
+export interface WidgetMeta { name: string; version: string; description: string; author: string; category: 'ui' | 'commerce' | 'navigation' | 'social-proof' | 'data' | 'forms' | 'media' | 'layout'; tags: string[]; icon?: string; }
+export interface WidgetPropDef { name: string; type: string; required: boolean; default?: string; description: string; }
+export interface WidgetDefinition<P = any> { component: ComponentType<P>; meta: WidgetMeta; propDefs: WidgetPropDef[]; __LOVABLE_WIDGET__: true; }
+export interface CreateWidgetConfig<P> { meta: WidgetMeta; component: ComponentType<P>; propDefs: WidgetPropDef[]; }
+export interface ThemeTokens { background: string; foreground: string; card: string; cardForeground: string; primary: string; primaryForeground: string; secondary: string; secondaryForeground: string; muted: string; mutedForeground: string; accent: string; accentForeground: string; destructive: string; destructiveForeground: string; border: string; ring: string; radius: string; }
+export function createWidget<P extends Record<string, any>>(config: CreateWidgetConfig<P>): WidgetDefinition<P>;
+export function useWidgetTheme(): ThemeTokens;
+export function useWidgetId(prefix?: string): string;
+export interface WidgetCardProps extends HTMLAttributes<HTMLDivElement> { children: ReactNode; noPadding?: boolean; }
+export declare const WidgetCard: React.FC<WidgetCardProps>;
+export interface WidgetHeaderProps extends HTMLAttributes<HTMLDivElement> { title: string; subtitle?: string; children?: ReactNode; }
+export declare const WidgetHeader: React.FC<WidgetHeaderProps>;
+export interface WidgetButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { variant?: 'primary' | 'secondary' | 'ghost' | 'destructive'; size?: 'sm' | 'md' | 'lg'; }
+export declare const WidgetButton: React.FC<WidgetButtonProps>;
+export interface WidgetBadgeProps extends HTMLAttributes<HTMLSpanElement> { variant?: 'default' | 'primary' | 'success' | 'warning' | 'destructive'; }
+export declare const WidgetBadge: React.FC<WidgetBadgeProps>;
+export interface WidgetDividerProps { className?: string; }
+export declare const WidgetDivider: React.FC<WidgetDividerProps>;

package/dist/index.js

@@ -0,0 +1,12 @@
+'use strict';
+const react = require('react');
+function createWidget(config) { const { meta, component: Component, propDefs } = config; const WrappedComponent = react.forwardRef((props, ref) => { const { className = "", ...rest } = props; return react.createElement("div", { ref, className: ("lw-widget lw-widget-" + meta.name + " " + className).trim(), "data-lw-widget": meta.name, "data-lw-version": meta.version }, react.createElement(Component, rest)); }); WrappedComponent.displayName = "LovableWidget(" + meta.name + ")"; return { component: WrappedComponent, meta, propDefs, __LOVABLE_WIDGET__: true }; }
+function useWidgetTheme() { return react.useMemo(() => { const get = (name) => { if (typeof window === "undefined") return ""; return getComputedStyle(document.documentElement).getPropertyValue("--" + name).trim(); }; return { background: get("background"), foreground: get("foreground"), card: get("card"), cardForeground: get("card-foreground"), primary: get("primary"), primaryForeground: get("primary-foreground"), secondary: get("secondary"), secondaryForeground: get("secondary-foreground"), muted: get("muted"), mutedForeground: get("muted-foreground"), accent: get("accent"), accentForeground: get("accent-foreground"), destructive: get("destructive"), destructiveForeground: get("destructive-foreground"), border: get("border"), ring: get("ring"), radius: get("radius") }; }, []); }
+let idCounter = 0;
+function useWidgetId(prefix) { return react.useMemo(() => { idCounter += 1; return (prefix || "lw") + "-" + idCounter; }, [prefix]); }
+function WidgetCard({ children, noPadding, className = "", ...props }) { return react.createElement("div", { className: ("lw-card " + (noPadding ? "lw-card--no-padding " : "") + className).trim(), ...props }, children); }
+function WidgetHeader({ title, subtitle, children, className = "", ...props }) { return react.createElement("div", { className: ("lw-header " + className).trim(), ...props }, react.createElement("div", null, react.createElement("h3", { className: "lw-header__title" }, title), subtitle && react.createElement("p", { className: "lw-header__subtitle" }, subtitle)), children && react.createElement("div", { className: "lw-header__actions" }, children)); }
+function WidgetButton({ children, variant = "primary", size = "md", className = "", ...props }) { return react.createElement("button", { className: ("lw-btn lw-btn--" + variant + " lw-btn--" + size + " " + className).trim(), ...props }, children); }
+function WidgetBadge({ children, variant = "default", className = "", ...props }) { return react.createElement("span", { className: ("lw-badge lw-badge--" + variant + " " + className).trim(), ...props }, children); }
+function WidgetDivider({ className = "" }) { return react.createElement("hr", { className: ("lw-divider " + className).trim() }); }
+exports.createWidget = createWidget; exports.useWidgetTheme = useWidgetTheme; exports.useWidgetId = useWidgetId; exports.WidgetCard = WidgetCard; exports.WidgetHeader = WidgetHeader; exports.WidgetButton = WidgetButton; exports.WidgetBadge = WidgetBadge; exports.WidgetDivider = WidgetDivider;

package/dist/index.mjs

@@ -0,0 +1,29 @@
+import { forwardRef, createElement, useMemo } from 'react';
+
+function createWidget(config) {
+  const { meta, component: Component, propDefs } = config;
+  const WrappedComponent = forwardRef((props, ref) => {
+    const { className = "", ...rest } = props;
+    return createElement("div", { ref, className: ("lw-widget lw-widget-" + meta.name + " " + className).trim(), "data-lw-widget": meta.name, "data-lw-version": meta.version }, createElement(Component, rest));
+  });
+  WrappedComponent.displayName = "LovableWidget(" + meta.name + ")";
+  return { component: WrappedComponent, meta, propDefs, __LOVABLE_WIDGET__: true };
+}
+
+function useWidgetTheme() {
+  return useMemo(() => {
+    const get = (name) => { if (typeof window === "undefined") return ""; return getComputedStyle(document.documentElement).getPropertyValue("--" + name).trim(); };
+    return { background: get("background"), foreground: get("foreground"), card: get("card"), cardForeground: get("card-foreground"), primary: get("primary"), primaryForeground: get("primary-foreground"), secondary: get("secondary"), secondaryForeground: get("secondary-foreground"), muted: get("muted"), mutedForeground: get("muted-foreground"), accent: get("accent"), accentForeground: get("accent-foreground"), destructive: get("destructive"), destructiveForeground: get("destructive-foreground"), border: get("border"), ring: get("ring"), radius: get("radius") };
+  }, []);
+}
+
+let idCounter = 0;
+function useWidgetId(prefix) { return useMemo(() => { idCounter += 1; return (prefix || "lw") + "-" + idCounter; }, [prefix]); }
+
+function WidgetCard({ children, noPadding, className = "", ...props }) { return createElement("div", { className: ("lw-card " + (noPadding ? "lw-card--no-padding " : "") + className).trim(), ...props }, children); }
+function WidgetHeader({ title, subtitle, children, className = "", ...props }) { return createElement("div", { className: ("lw-header " + className).trim(), ...props }, createElement("div", null, createElement("h3", { className: "lw-header__title" }, title), subtitle && createElement("p", { className: "lw-header__subtitle" }, subtitle)), children && createElement("div", { className: "lw-header__actions" }, children)); }
+function WidgetButton({ children, variant = "primary", size = "md", className = "", ...props }) { return createElement("button", { className: ("lw-btn lw-btn--" + variant + " lw-btn--" + size + " " + className).trim(), ...props }, children); }
+function WidgetBadge({ children, variant = "default", className = "", ...props }) { return createElement("span", { className: ("lw-badge lw-badge--" + variant + " " + className).trim(), ...props }, children); }
+function WidgetDivider({ className = "" }) { return createElement("hr", { className: ("lw-divider " + className).trim() }); }
+
+export { createWidget, useWidgetTheme, useWidgetId, WidgetCard, WidgetHeader, WidgetButton, WidgetBadge, WidgetDivider };

package/dist/style.css

@@ -0,0 +1,26 @@
+.lw-widget { font-family: inherit; line-height: 1.5; color: hsl(var(--foreground, 222.2 84% 4.9%)); -webkit-font-smoothing: antialiased; }
+.lw-card { border: 1px solid hsl(var(--border, 214.3 31.8% 91.4%)); border-radius: var(--radius, 0.75rem); background: hsl(var(--card, 0 0% 100%)); color: hsl(var(--card-foreground, 222.2 84% 4.9%)); padding: 1.5rem; transition: box-shadow 0.2s ease; }
+.lw-card:hover { box-shadow: 0 4px 20px -4px hsl(var(--primary, 221.2 83.2% 53.3%) / 0.1); }
+.lw-card--no-padding { padding: 0; }
+.lw-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem; }
+.lw-header__title { font-size: 1.25rem; font-weight: 700; margin: 0; color: hsl(var(--foreground, 222.2 84% 4.9%)); }
+.lw-header__subtitle { font-size: 0.875rem; margin: 0.25rem 0 0; color: hsl(var(--muted-foreground, 215.4 16.3% 46.9%)); }
+.lw-header__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
+.lw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius, 0.75rem); font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all 0.15s ease; white-space: nowrap; font-family: inherit; }
+.lw-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.lw-btn--sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
+.lw-btn--md { padding: 0.5rem 1rem; font-size: 0.875rem; }
+.lw-btn--lg { padding: 0.625rem 1.5rem; font-size: 1rem; }
+.lw-btn--primary { background: hsl(var(--primary, 221.2 83.2% 53.3%)); color: hsl(var(--primary-foreground, 210 40% 98%)); }
+.lw-btn--primary:hover:not(:disabled) { opacity: 0.9; }
+.lw-btn--secondary { background: hsl(var(--secondary, 210 40% 96.1%)); color: hsl(var(--secondary-foreground, 222.2 47.4% 11.2%)); }
+.lw-btn--ghost { background: transparent; color: hsl(var(--foreground, 222.2 84% 4.9%)); }
+.lw-btn--ghost:hover:not(:disabled) { background: hsl(var(--accent, 210 40% 96.1%)); }
+.lw-btn--destructive { background: hsl(var(--destructive, 0 84.2% 60.2%)); color: hsl(var(--destructive-foreground, 210 40% 98%)); }
+.lw-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; line-height: 1.5; }
+.lw-badge--default { background: hsl(var(--secondary, 210 40% 96.1%)); color: hsl(var(--secondary-foreground, 222.2 47.4% 11.2%)); }
+.lw-badge--primary { background: hsl(var(--primary, 221.2 83.2% 53.3%) / 0.1); color: hsl(var(--primary, 221.2 83.2% 53.3%)); }
+.lw-badge--success { background: hsl(142 76% 36% / 0.1); color: hsl(142 76% 36%); }
+.lw-badge--warning { background: hsl(38 92% 50% / 0.1); color: hsl(38 92% 50%); }
+.lw-badge--destructive { background: hsl(var(--destructive, 0 84.2% 60.2%) / 0.1); color: hsl(var(--destructive, 0 84.2% 60.2%)); }
+.lw-divider { border: none; height: 1px; background: hsl(var(--border, 214.3 31.8% 91.4%)); margin: 1rem 0; }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lovable-widgets/core",
-  "version": "0.1.0",
-  "description": "Pure integration SDK for building Lovable-compatible widgets",
+  "version": "1.0.1",
+  "description": "Core SDK for building Lovable-compatible widgets. Every @lovable-widgets package must use this.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/dist/context.d.ts

@@ -1,3 +0,0 @@
-import type { WidgetContextValue } from './types';
-export declare const WidgetContext: import("react").Context<WidgetContextValue | null>;
-export declare function useWidgetContext(): WidgetContextValue | null;

package/dist/createWidget.d.ts

@@ -1,7 +0,0 @@
-import type { CreateWidgetConfig, WidgetDefinition } from './types';
-declare global {
-    interface Window {
-        __LOVABLE_WIDGET_SECRETS__?: Record<string, string>;
-    }
-}
-export declare function createWidget<P extends Record<string, any>>(config: CreateWidgetConfig<P>): WidgetDefinition<P>;

package/dist/errorBoundary.d.ts

@@ -1,19 +0,0 @@
-import React, { Component, ErrorInfo, ReactNode } from 'react';
-interface Props {
-    widgetName: string;
-    onError?: (error: Error, errorInfo?: {
-        componentStack?: string;
-    }) => void;
-    children: ReactNode;
-}
-interface State {
-    hasError: boolean;
-    error: Error | null;
-}
-export declare class WidgetErrorBoundary extends Component<Props, State> {
-    state: State;
-    static getDerivedStateFromError(error: Error): State;
-    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
-}
-export {};

package/dist/events.d.ts

@@ -1,3 +0,0 @@
-import type { WidgetEventType, WidgetEvent } from './types';
-export declare function emitWidgetEvent<T = any>(widgetName: string, type: WidgetEventType, payload?: T): void;
-export declare function onWidgetEvent<T = any>(type: WidgetEventType | '*', callback: (event: WidgetEvent<T>) => void): () => void;

package/dist/hooks.d.ts

@@ -1,7 +0,0 @@
-import type { ThemeTokens, WidgetEventType, WidgetEvent } from './types';
-export declare function useWidgetTheme(): ThemeTokens;
-export declare function useWidgetId(prefix?: string): string;
-export declare function useWidgetSecrets(): Record<string, string>;
-export declare function useWidgetStatus(): 'initializing' | 'ready' | 'missing-secrets' | 'unknown';
-export declare function useWidgetEmit(): (type: WidgetEventType, payload?: any) => void;
-export declare function useWidgetListener<T = any>(type: WidgetEventType | '*', callback: (event: WidgetEvent<T>) => void): void;

package/dist/lovable-widgets-core.cjs

@@ -1 +0,0 @@
-var ie=Object.create;var p=Object.defineProperty;var de=Object.getOwnPropertyDescriptor;var se=Object.getOwnPropertyNames;var ae=Object.getPrototypeOf,ge=Object.prototype.hasOwnProperty;var ce=(e,t,r)=>t in e?p(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r;var ue=(e,t)=>{for(var r in t)p(e,r,{get:t[r],enumerable:!0})},b=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of se(t))!ge.call(e,o)&&o!==r&&p(e,o,{get:()=>t[o],enumerable:!(n=de(t,o))||n.enumerable});return e};var me=(e,t,r)=>(r=e!=null?ie(ae(e)):{},b(t||!e||!e.__esModule?p(r,"default",{value:e,enumerable:!0}):r,e)),fe=e=>b(p({},"__esModule",{value:!0}),e);var M=(e,t,r)=>ce(e,typeof t!="symbol"?t+"":t,r);var We={};ue(We,{WidgetErrorBoundary:()=>c,clearRegistry:()=>X,createWidget:()=>B,emitWidgetEvent:()=>d,getWidget:()=>w,listWidgets:()=>q,mountWidget:()=>Z,onWidgetEvent:()=>y,provideSecrets:()=>J,registerWidget:()=>K,unmountWidget:()=>h,unregisterWidget:()=>U,useWidgetContext:()=>g,useWidgetEmit:()=>H,useWidgetId:()=>$,useWidgetListener:()=>z,useWidgetSecrets:()=>G,useWidgetStatus:()=>O,useWidgetTheme:()=>A});module.exports=fe(We);var i=require("react");var v=require("react"),_=(0,v.createContext)(null);function g(){return(0,v.useContext)(_)}var I=require("react");var C="lovable-widget:";function d(e,t,r){if(typeof window>"u")return;let n={widget:e,type:t,payload:r,timestamp:Date.now()};window.dispatchEvent(new CustomEvent(`${C}${t}`,{detail:n})),window.dispatchEvent(new CustomEvent(`${C}*`,{detail:n}))}function y(e,t){if(typeof window>"u")return()=>{};let r=`${C}${e}`,n=o=>{t(o.detail)};return window.addEventListener(r,n),()=>window.removeEventListener(r,n)}var P=require("react/jsx-runtime"),c=class extends I.Component{constructor(){super(...arguments);M(this,"state",{hasError:!1,error:null})}static getDerivedStateFromError(r){return{hasError:!0,error:r}}componentDidCatch(r,n){let{widgetName:o,onError:l}=this.props;d(o,"error",{message:r.message,stack:r.stack,componentStack:n.componentStack}),l?.(r,{componentStack:n.componentStack??void 0})}render(){return this.state.hasError?(0,P.jsxs)("div",{"data-lw-error":this.props.widgetName,children:['Widget "',this.props.widgetName,'" encountered an error.']}):this.props.children}};var s=require("react/jsx-runtime");function pe({lifecycle:e,widgetName:t}){return(0,i.useEffect)(()=>(e.onMount?.(),d(t,"ready"),()=>{e.onUnmount?.()}),[]),null}function B(e){let{meta:t,component:r,propDefs:n,secrets:o=[],config:l={},lifecycle:x={}}=e,L=(0,i.forwardRef)((j,R)=>{let{className:D="",...ee}=j,[te,re]=(0,i.useState)(o.filter(()=>!1)),[T,ne]=(0,i.useState)({}),[E,k]=(0,i.useState)("initializing");(0,i.useEffect)(()=>{if(o.length===0){k("ready");return}let u=typeof window<"u"&&window.__LOVABLE_WIDGET_SECRETS__||{},m=[],N={};for(let f of o){let V=f.envKey||f.name;u[V]?N[f.name]=u[V]:f.required!==!1&&m.push(f)}ne(N),re(m),k(m.length>0?"missing-secrets":"ready"),m.length>0&&d(t.name,"missing-secrets",{secrets:m})},[]);let oe=(0,i.useMemo)(()=>({meta:t,secrets:T,config:l,status:E}),[T,E]);return E==="missing-secrets"?(0,s.jsxs)("div",{ref:R,className:D||void 0,"data-lw-widget":t.name,"data-lw-version":t.version,"data-lw-status":"missing-secrets",children:['Widget "',t.name,'" requires secrets: ',te.map(u=>u.envKey||u.name).join(", ")]}):(0,s.jsx)(_.Provider,{value:oe,children:(0,s.jsx)(c,{widgetName:t.name,onError:x.onError,children:(0,s.jsxs)("div",{ref:R,className:D||void 0,"data-lw-widget":t.name,"data-lw-version":t.version,"data-lw-status":E,children:[(0,s.jsx)(pe,{lifecycle:x,widgetName:t.name}),(0,s.jsx)(r,{...ee,__widgetSecrets:T})]})})})});return L.displayName=`LovableWidget(${t.name})`,{component:L,meta:t,propDefs:n,secrets:o,config:l,lifecycle:x,__LOVABLE_WIDGET__:!0}}var a=require("react");function A(){return(0,a.useMemo)(()=>{let e=t=>typeof window>"u"?"":getComputedStyle(document.documentElement).getPropertyValue("--"+t).trim();return{background:e("background"),foreground:e("foreground"),card:e("card"),cardForeground:e("card-foreground"),primary:e("primary"),primaryForeground:e("primary-foreground"),secondary:e("secondary"),secondaryForeground:e("secondary-foreground"),muted:e("muted"),mutedForeground:e("muted-foreground"),accent:e("accent"),accentForeground:e("accent-foreground"),destructive:e("destructive"),destructiveForeground:e("destructive-foreground"),border:e("border"),ring:e("ring"),radius:e("radius")}},[])}var F=0;function $(e){return(0,a.useMemo)(()=>(F+=1,(e||"lw")+"-"+F),[e])}function G(){let e=g();return e?e.secrets:{}}function O(){let e=g();return e?e.status:"unknown"}function H(){let t=g()?.meta.name??"unknown";return(0,a.useCallback)((r,n)=>{d(t,r,n)},[t])}function z(e,t){(0,a.useEffect)(()=>y(e,t),[e,t])}var W=new Map;function K(e){if(!e.__LOVABLE_WIDGET__)throw new Error("registerWidget: argument must be a WidgetDefinition created by createWidget()");W.set(e.meta.name,e)}function w(e){return W.get(e)}function q(){return Array.from(W.values())}function U(e){return W.delete(e)}function X(){W.clear()}function J(e){typeof window<"u"&&(window.__LOVABLE_WIDGET_SECRETS__={...window.__LOVABLE_WIDGET_SECRETS__||{},...e})}var Q=me(require("react"),1),Y=require("react-dom/client");var S=new WeakMap;function Z(e,t,r={}){let n=w(t);if(!n)throw new Error(`mountWidget: widget "${t}" is not registered.`);h(e);let o=(0,Y.createRoot)(e);o.render(Q.default.createElement(n.component,r)),S.set(e,o)}function h(e){let t=S.get(e);t&&(t.unmount(),S.delete(e))}

package/dist/lovable-widgets-core.js

@@ -1 +0,0 @@
-var G=Object.defineProperty;var O=(e,t,r)=>t in e?G(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r;var D=(e,t,r)=>O(e,typeof t!="symbol"?t+"":t,r);import{forwardRef as U,useState as w,useEffect as N,useMemo as X}from"react";import{createContext as H,useContext as z}from"react";var E=H(null);function g(){return z(E)}import{Component as K}from"react";var v="lovable-widget:";function i(e,t,r){if(typeof window>"u")return;let n={widget:e,type:t,payload:r,timestamp:Date.now()};window.dispatchEvent(new CustomEvent(`${v}${t}`,{detail:n})),window.dispatchEvent(new CustomEvent(`${v}*`,{detail:n}))}function y(e,t){if(typeof window>"u")return()=>{};let r=`${v}${e}`,n=o=>{t(o.detail)};return window.addEventListener(r,n),()=>window.removeEventListener(r,n)}import{jsxs as q}from"react/jsx-runtime";var c=class extends K{constructor(){super(...arguments);D(this,"state",{hasError:!1,error:null})}static getDerivedStateFromError(r){return{hasError:!0,error:r}}componentDidCatch(r,n){let{widgetName:o,onError:m}=this.props;i(o,"error",{message:r.message,stack:r.stack,componentStack:n.componentStack}),m?.(r,{componentStack:n.componentStack??void 0})}render(){return this.state.hasError?q("div",{"data-lw-error":this.props.widgetName,children:['Widget "',this.props.widgetName,'" encountered an error.']}):this.props.children}};import{jsx as p,jsxs as k}from"react/jsx-runtime";function J({lifecycle:e,widgetName:t}){return N(()=>(e.onMount?.(),i(t,"ready"),()=>{e.onUnmount?.()}),[]),null}function Q(e){let{meta:t,component:r,propDefs:n,secrets:o=[],config:m={},lifecycle:W={}}=e,_=U((I,C)=>{let{className:S="",...P}=I,[B,F]=w(o.filter(()=>!1)),[l,A]=w({}),[f,h]=w("initializing");N(()=>{if(o.length===0){h("ready");return}let d=typeof window<"u"&&window.__LOVABLE_WIDGET_SECRETS__||{},s=[],L={};for(let a of o){let R=a.envKey||a.name;d[R]?L[a.name]=d[R]:a.required!==!1&&s.push(a)}A(L),F(s),h(s.length>0?"missing-secrets":"ready"),s.length>0&&i(t.name,"missing-secrets",{secrets:s})},[]);let $=X(()=>({meta:t,secrets:l,config:m,status:f}),[l,f]);return f==="missing-secrets"?k("div",{ref:C,className:S||void 0,"data-lw-widget":t.name,"data-lw-version":t.version,"data-lw-status":"missing-secrets",children:['Widget "',t.name,'" requires secrets: ',B.map(d=>d.envKey||d.name).join(", ")]}):p(E.Provider,{value:$,children:p(c,{widgetName:t.name,onError:W.onError,children:k("div",{ref:C,className:S||void 0,"data-lw-widget":t.name,"data-lw-version":t.version,"data-lw-status":f,children:[p(J,{lifecycle:W,widgetName:t.name}),p(r,{...P,__widgetSecrets:l})]})})})});return _.displayName=`LovableWidget(${t.name})`,{component:_,meta:t,propDefs:n,secrets:o,config:m,lifecycle:W,__LOVABLE_WIDGET__:!0}}import{useMemo as b,useEffect as Y,useCallback as Z}from"react";function j(){return b(()=>{let e=t=>typeof window>"u"?"":getComputedStyle(document.documentElement).getPropertyValue("--"+t).trim();return{background:e("background"),foreground:e("foreground"),card:e("card"),cardForeground:e("card-foreground"),primary:e("primary"),primaryForeground:e("primary-foreground"),secondary:e("secondary"),secondaryForeground:e("secondary-foreground"),muted:e("muted"),mutedForeground:e("muted-foreground"),accent:e("accent"),accentForeground:e("accent-foreground"),destructive:e("destructive"),destructiveForeground:e("destructive-foreground"),border:e("border"),ring:e("ring"),radius:e("radius")}},[])}var V=0;function ee(e){return b(()=>(V+=1,(e||"lw")+"-"+V),[e])}function te(){let e=g();return e?e.secrets:{}}function re(){let e=g();return e?e.status:"unknown"}function ne(){let t=g()?.meta.name??"unknown";return Z((r,n)=>{i(t,r,n)},[t])}function oe(e,t){Y(()=>y(e,t),[e,t])}var u=new Map;function ie(e){if(!e.__LOVABLE_WIDGET__)throw new Error("registerWidget: argument must be a WidgetDefinition created by createWidget()");u.set(e.meta.name,e)}function x(e){return u.get(e)}function de(){return Array.from(u.values())}function se(e){return u.delete(e)}function ae(){u.clear()}function ge(e){typeof window<"u"&&(window.__LOVABLE_WIDGET_SECRETS__={...window.__LOVABLE_WIDGET_SECRETS__||{},...e})}import ce from"react";import{createRoot as ue}from"react-dom/client";var T=new WeakMap;function me(e,t,r={}){let n=x(t);if(!n)throw new Error(`mountWidget: widget "${t}" is not registered.`);M(e);let o=ue(e);o.render(ce.createElement(n.component,r)),T.set(e,o)}function M(e){let t=T.get(e);t&&(t.unmount(),T.delete(e))}export{c as WidgetErrorBoundary,ae as clearRegistry,Q as createWidget,i as emitWidgetEvent,x as getWidget,de as listWidgets,me as mountWidget,y as onWidgetEvent,ge as provideSecrets,ie as registerWidget,M as unmountWidget,se as unregisterWidget,g as useWidgetContext,ne as useWidgetEmit,ee as useWidgetId,oe as useWidgetListener,te as useWidgetSecrets,re as useWidgetStatus,j as useWidgetTheme};

package/dist/mount.d.ts

@@ -1,2 +0,0 @@
-export declare function mountWidget(container: HTMLElement, widgetName: string, props?: Record<string, any>): void;
-export declare function unmountWidget(container: HTMLElement): void;

package/dist/provideSecrets.d.ts

@@ -1 +0,0 @@
-export declare function provideSecrets(secretMap: Record<string, string>): void;

package/dist/registry.d.ts

@@ -1,6 +0,0 @@
-import type { WidgetDefinition } from './types';
-export declare function registerWidget(definition: WidgetDefinition): void;
-export declare function getWidget(name: string): WidgetDefinition | undefined;
-export declare function listWidgets(): WidgetDefinition[];
-export declare function unregisterWidget(name: string): boolean;
-export declare function clearRegistry(): void;

package/dist/types.d.ts

@@ -1,91 +0,0 @@
-import { ComponentType } from 'react';
-export interface WidgetSecretDef {
-    name: string;
-    envKey: string;
-    description: string;
-    required?: boolean;
-    acquireUrl?: string;
-    service?: string;
-}
-export interface WidgetMeta {
-    name: string;
-    version: string;
-    description: string;
-    author: string;
-    category: 'ui' | 'commerce' | 'navigation' | 'social-proof' | 'data' | 'forms' | 'media' | 'layout' | 'ai' | 'analytics' | 'communication';
-    tags: string[];
-    icon?: string;
-    license?: string;
-    repository?: string;
-    homepage?: string;
-}
-export interface WidgetConfig {
-    ssr?: boolean;
-    minCoreVersion?: string;
-    sandbox?: 'strict' | 'permissive';
-    cssPrefix?: string;
-}
-export interface WidgetPropDef {
-    name: string;
-    type: string;
-    required: boolean;
-    default?: string;
-    description: string;
-    options?: string[];
-}
-export interface WidgetLifecycle {
-    onMount?: () => void;
-    onUnmount?: () => void;
-    onError?: (error: Error, errorInfo?: {
-        componentStack?: string;
-    }) => void;
-}
-export interface WidgetDefinition<P = any> {
-    component: ComponentType<P>;
-    meta: WidgetMeta;
-    propDefs: WidgetPropDef[];
-    secrets: WidgetSecretDef[];
-    config: WidgetConfig;
-    lifecycle: WidgetLifecycle;
-    __LOVABLE_WIDGET__: true;
-}
-export interface CreateWidgetConfig<P> {
-    meta: WidgetMeta;
-    component: ComponentType<P>;
-    propDefs: WidgetPropDef[];
-    secrets?: WidgetSecretDef[];
-    config?: WidgetConfig;
-    lifecycle?: WidgetLifecycle;
-}
-export interface ThemeTokens {
-    background: string;
-    foreground: string;
-    card: string;
-    cardForeground: string;
-    primary: string;
-    primaryForeground: string;
-    secondary: string;
-    secondaryForeground: string;
-    muted: string;
-    mutedForeground: string;
-    accent: string;
-    accentForeground: string;
-    destructive: string;
-    destructiveForeground: string;
-    border: string;
-    ring: string;
-    radius: string;
-}
-export interface WidgetContextValue {
-    meta: WidgetMeta;
-    secrets: Record<string, string>;
-    config: WidgetConfig;
-    status: 'initializing' | 'ready' | 'missing-secrets';
-}
-export type WidgetEventType = 'ready' | 'error' | 'state-change' | 'action' | 'missing-secrets' | 'resize';
-export interface WidgetEvent<T = any> {
-    widget: string;
-    type: WidgetEventType;
-    payload: T;
-    timestamp: number;
-}