@kemu-io/hs-react 0.2.36

package/mjs/WidgetWrapper.d.ts

@@ -0,0 +1,563 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import React$1 from 'react';
+
+export type Rect = {
+	width: number;
+	height: number;
+	top: number;
+	left: number;
+};
+export type Point = {
+	x: number;
+	y: number;
+};
+export type BinaryFile<D extends ArrayBuffer | Uint8Array | Uint8ClampedArray | Buffer = ArrayBuffer> = {
+	format: string;
+	data: D;
+};
+declare enum DataType {
+	Number = 0,
+	String = 1,
+	ArrayBuffer = 2,
+	Array = 3,
+	Boolean = 4,
+	/** a javascript object */
+	JsonObj = 5,
+	/**
+	 * Does not care; mostly used by actions to indicate they accept anything since they probably won't use the
+	 * value.
+	 **/
+	Anything = 6,
+	/** Raw image data, produced in browser environments */
+	ImageData = 7,
+	/** Raw audio data fraction */
+	AudioBuffer = 8,
+	Rect = 9,
+	Point = 10,
+	ImageBitmap = 11,
+	/**
+	 * Custom binary data. Use the `format` property to specify the type of data, i.e. 'image/png', 'audio/mp3', etc.
+	 **/
+	BinaryFile = 12
+}
+export type JsonType = {
+	[key: string]: SupportedTypes;
+};
+export type KemuType = number | string | ArrayBuffer | JsonType | boolean | ImageData | AudioBuffer | Rect | Point | ImageBitmap | BinaryFile;
+export type SupportedTypes = KemuType | KemuType[];
+/** Type passed around between gates and blocks */
+export type Data = {
+	/** the type of data represented  */
+	type: DataType;
+	value: SupportedTypes;
+	/** original time when the event was first picked up by an input gate. */
+	timestamp: number;
+};
+/**
+ * Describe the shape of objects. For example:
+ *
+ * Given the following object:
+ * ```
+ * const obj = {
+ *   property1: 12,
+ *   property2: 'Hello'
+ * };
+ * ```
+ *
+ * The shape definition would be:
+ * ```
+ * {
+ *   'property1': DataType.Number,
+ *   'property2': DataType.String,
+ * }
+ * ```
+ *
+ * Use a JsonPrimitiveFormat (`$$primitive_{x}`) to specify the type of an array of primitive objects,
+ * where 'x' is the index in the array the value of the property belongs to. For example:
+ *
+ * An event with `[1, 'hi', {other: 'yes}]` would produce the following jsonShape:
+ *
+ * ```
+ * {
+ *   '$$primitive_0': DataType.Number,
+ *   '$$primitive_1': DataType.String,
+ *   '$$primitive_2': DataType.JsonObj,
+ * }
+ * ```
+ *
+ * If no primitive index is specified, the system assumes all the items in the array
+ * will have the given primitive type. For example:
+ *
+ * An array of `[1, 2, 3, 4]` should be described as:
+ * ```
+ * {
+ *   '$$primitive': DataType.Number
+ * }
+ * ```
+ */
+export type JsonTypeShape = {
+	[key: string]: DataType;
+};
+/**
+ * Used by Widget (formerly known as Gates) modules when defining their
+ * input/output port list
+ */
+export type WidgetPort = {
+	/** a unique identifier (in the context of the widget) for this port. */
+	name: string;
+	/** alternative label used to replace the name for presentation purposes only */
+	label?: string;
+	/** Type of data the port accepts or produces, an array indicates the gate can receive multiple types */
+	type: DataType | DataType[];
+	/**
+	 * If true, processors won't be invoked until at least an event is received in this port.
+	 */
+	required?: boolean;
+	/**
+	 * Describes the shape of a JSON object when dataType == JsonObj. Or the shape of items
+	 * when dataType == Array
+	 */
+	jsonShape?: JsonTypeShape;
+	/** help description markdown */
+	description?: string;
+};
+export type WidgetState<T extends Record<string, any> = Record<string, unknown>> = T;
+export type TargetOutput = {
+	/**
+	 * the name of the port the `data` will be sent from.
+	 * This name MUST match one of the ports
+	 * returned by the `getOutputs` function or defined in the widget
+	 * manifest. If the name does not match, the data will not be sent.
+	 **/
+	name: string;
+	/**
+	 * The data to send to the output port.
+	 * If the value is `undefined` or `null`, no data will be sent.
+	 * Also, the data type MUST match the type defined in the widget manifest.
+	 */
+	value: SupportedTypes | undefined | null;
+	/**
+	 * the data type of the value being sent.
+	 * This value is automatically inferred from the widget manifest.
+	 **/
+	type: DataType;
+	/** id of the variant that defined the output */
+	variantId?: string;
+};
+export type WidgetPortStr = Omit<WidgetPort, "type"> & {
+	type: string;
+};
+declare enum ProcessorType {
+	Javascript = "js",
+	Python = "py",
+	Executable = "exe"
+}
+export type ServiceSecret = {
+	/** a markdown description of the secret */
+	description: string;
+	/** if true, the secret is optional and the service will still start if the secret is not provided */
+	optional?: boolean;
+};
+export type ServiceWidgetVariant<P extends WidgetPort | WidgetPortStr> = {
+	/** unique identifier for the variant */
+	id: string;
+	name: string;
+	description: string;
+	/**
+	 * custom color for the variant. If not provided, the main
+	 * color defined in the manifest will be used.
+	 **/
+	color?: string;
+	/** SVG icon data */
+	svgIcon?: string;
+	inputs?: P[];
+	outputs?: P[];
+};
+export type ServiceManifest<P extends WidgetPort | WidgetPortStr> = {
+	/** the unique name defined by the service */
+	name: string;
+	/** a unique identifier given during startup */
+	version: string;
+	/** a service title for UI purposes */
+	title?: string;
+	/** a shorten title to be used in the canvas */
+	shortTitle?: string;
+	description: string;
+	processor: ProcessorType;
+	/**
+	 * if true, it indicates other services can subscribe
+	 * to events emitted by this service. Only services
+	 * with `eventEmitter` set to true can use `broadcast`
+	 * to emit events.
+	 */
+	eventEmitter?: boolean;
+	/**
+	 * Specifies the default timeout in seconds when a parentEvent is received.
+	 * This is used to discard events that take too long to process.
+	 * Set to 0 to disable the timeout. Warning this may
+	 * cause some parent widgets to hang indefinitely if the child
+	 * widget does not respond to the event.
+	 **/
+	processingTimeoutSec?: number;
+	/**
+	 * if true, parent events sent to this widget will
+	 * be resolved immediately, meaning the parent widget
+	 * will not have to wait for this service to respond
+	 * before continuing execution.
+	 */
+	asyncParentEvents?: boolean;
+	/**
+	 * if true, it indicates the service is only meant to be used in a
+	 * web environment. The widget won't work when exported.
+	 */
+	webOnly?: boolean;
+	/**
+	 * if set the service will only receive env vars that start with this prefix.
+	 * Use it to isolate the information services have access to.
+	 * Eg:
+	 * - `KEMU_{CUSTOM_PREFIX}_DB_URL`: Your service will receive this env var as `DB_URL`
+	 *
+	 * Remember that only variables that start with `KEMU_` are forwarded to services.
+	 */
+	envVarPrefix?: string;
+	color?: string;
+	svgIcon?: string;
+	/**
+	 * Flags this service as internal. Internal services are not
+	 * meant to be used by the end-user. Attempts to use an internal service
+	 * will likely result in an error.
+	 */
+	internal?: boolean;
+	/**
+	 * if true, the service is expected to have a `widgetUI.js` file in the root directory
+	 * that will be used to mount a new UI onto the canvas.
+	 **/
+	widgetUI?: boolean;
+	/**
+	 * If true, the processor won't be forwarded any parent events.
+	 * Use it when you have a widget with custom UI that performs all processing
+	 * inside of its own component. Keep in mind that when exported, any processing
+	 * logic that does not exist in the processor will not be available in the exported
+	 * recipe.
+	 */
+	ignoreParentEvents?: boolean;
+	/**
+	 * A list of relative paths to `txt` files where custom widget clipboard data are stored. Eg:
+	 * ```json
+	 * {
+	 *  "customWidgets": [
+	 *    "customWidgets/widget1.txt",
+	 *    "customWidgets/widget2.txt",
+	 *  ]
+	 * }
+	 * ```
+	 * This will cause the service to be rendered as a folder with the custom widgets as sub-widgets.
+	 */
+	customWidgets?: string[];
+	/**
+	 * A list of widget variants that can be selected by the user.
+	 * All variants will invoke the same processor, but they can have different input/output ports
+	 * and be visually distinct.
+	 */
+	variants?: ServiceWidgetVariant<P>[];
+	/**
+	 * A list of relative paths to folders containing extra services that are part of this service. Eg:
+	 * ```json
+	 * {
+	 *  "subServices": [
+	 *    "subServices/subService1",
+	 *    "subServices/subService2",
+	 *  ]
+	 * }
+	 * ```
+	 *
+	 * Each folder should contain all the required files that represent a service (manifest, processor, etc).
+	 */
+	subServices?: string[];
+	/** the list of input ports. If not provided,
+	 * `dynamicInputs` MUST be set to true, or loading the
+	 * widget will fail.
+	 */
+	inputs: P[];
+	/**
+	 * the list of output ports. If not provided,
+	 * `dynamicOutputs` MUST be set to true, or loading the
+	 * widget will fail.
+	 */
+	outputs: P[];
+	/**
+	 * A map of secret names to their descriptions
+	 */
+	requiredSecrets?: {
+		[name: string]: ServiceSecret;
+	};
+};
+export type ServiceWidgetInfo = {
+	name: string;
+	icon?: string;
+	color?: string;
+	description: string;
+	contents: string;
+	/**
+	 * The id of the first root group in the widget.
+	 * Keep in mind this id will be re-generated when the widget is added to the canvas.
+	*/
+	rootGroupId: string;
+	protocolVersion: string;
+};
+/**
+ * This is the output of the service library after processing its own manifest file.
+ */
+export type PartiallyProcessedManifest<B extends Buffer | ArrayBuffer = Buffer, SM extends WidgetPort | WidgetPortStr = WidgetPortStr> = ServiceManifest<SM> & {
+	widgetUIContents?: B;
+	uiContentChecksum?: string;
+	/** path to the root directory where the service resides */
+	path: string;
+	/** added by the service automatically when the service is running in dev mode */
+	readonly devMode?: boolean;
+};
+/**
+ * This is the output of the Hub after combining a PartiallyProcessedManifest and processing variants, sub-services and custom widgets.
+ */
+export type ProcessedManifest<B extends Buffer | ArrayBuffer = Buffer> = Omit<PartiallyProcessedManifest<B, WidgetPort>, "customWidgets"> & {
+	customWidgets?: ServiceWidgetInfo[];
+	/** if present, it indicates this service is a sub-service of another service */
+	parentService?: {
+		name: string;
+		version: string;
+	};
+};
+export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & {
+	[K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
+}[Keys];
+export type DefineDynamicPortsArgs = RequireAtLeastOne<{
+	/**
+	 * Set to null to remove any previously defined ports or
+	 * set to an empty array to remove ports from the widget.
+	 */
+	outputs?: WidgetPort[] | null;
+	/**
+	 * Set to null to remove any previously defined ports or
+	 * set to an empty array to remove ports from the widget.
+	 */
+	inputs?: WidgetPort[] | null;
+}, "outputs" | "inputs"> & {
+	/** the id of the variant this definition applies to */
+	variantId?: string;
+};
+export type UseWidgetStateResponse<T extends WidgetState = WidgetState> = {
+	/**
+	 * the current state of the widget at the time the hook was created.
+	 * This state is not reactive and will not trigger a re-render when the state changes.
+	 **/
+	state: Readonly<T>;
+	/**
+	 * @returns the current state of the widget. This function is memoized and will always return the latest state.
+	 */
+	getState: () => Readonly<T>;
+	/**
+	 * Updates the state of the widget.
+	 * @param newState the new state to set.
+	 * @param triggerEvents if true, the widget will notify listeners that its state has changed. Default is true.
+	 */
+	setState: (newState: T, triggerEvents?: boolean) => void;
+};
+/**
+ * @returns the current state and a memoized function to get the current state.
+ */
+export type UseWidgetStateHook<T extends WidgetState = WidgetState> = () => UseWidgetStateResponse<T>;
+export type DeepReadOnly<T> = T extends (infer R)[] ? ReadonlyArray<DeepReadOnly<R>> : T extends object ? {
+	readonly [K in keyof T]: DeepReadOnly<T[K]>;
+} : T;
+export type DeepReadOnlyArray<T> = ReadonlyArray<DeepReadOnly<T>>;
+export type ServiceParentEvent = {
+	/** information about the widget producing */
+	sourceWidget: {
+		id: string;
+		port: string;
+	};
+	targetPort: string;
+	data: Data;
+};
+export type BroadcastEvent = {
+	outputs: TargetOutput[];
+	source: {
+		serviceName: string;
+		serviceVersion: string;
+		sessionId: number;
+	};
+};
+export type ServiceParentEventHandler = (event: ServiceParentEvent) => void | Promise<void>;
+export type ServiceBroadcastEventHandler = (event: DeepReadOnly<BroadcastEvent>) => void | Promise<void>;
+export type ServiceSetOutputsEventHandler = (outputs: DeepReadOnlyArray<TargetOutput>) => void | Promise<void>;
+export type WidgetRenderArgs = {
+	/** indicates if the Hub service is currently online */
+	serviceOnline: boolean;
+	/** indicates if this Widget is currently disabled */
+	disabled: boolean;
+};
+export type WidgetUIInstance = {
+	/** unmounts the component */
+	destroy: () => void;
+	/**
+	 * re-renders the component by triggering
+	 * an internal state change.
+	 **/
+	render: (a?: WidgetRenderArgs) => void;
+	handleParentEvent: ServiceParentEventHandler | null;
+	handleBroadcastEvent: ServiceBroadcastEventHandler | null;
+	handleSetOutputsEvent: ServiceSetOutputsEventHandler | null;
+};
+export type LimitedManifest = Omit<ProcessedManifest, "widgetUIContents" | "settingsUIContents" | "path">;
+export type ReactWidgetUtils = {
+	/**
+	 * Shows a native dialog to choose a file.
+	 * @returns a promise that resolves to the paths of the chosen files.
+	 **/
+	showChooseFileDialog: (args: {
+		title?: string;
+		fileTypes?: string[];
+		allowMultiple?: boolean;
+	}) => Promise<string[]>;
+	/**
+	 * Shows a native dialog to choose a directory.
+	 * @returns a promise that resolves to the path of the chosen directory.
+	 */
+	showChooseDirectoryDialog: (args: {
+		title?: string;
+	}) => Promise<string>;
+	browser: {
+		/**
+		 * @returns the Cache Storage path for the given file
+		 **/
+		getCacheFilePath: (fileName: string) => string;
+		/**
+		 * Adds the given data to the service cache
+		 * @param filePath the full path of the file, including the file name and extension
+		 * @param data the raw data to store
+		 * @param headers optional response headers
+		 * @returns
+		 */
+		cacheFile: (filePath: string, data: string | ArrayBuffer | Uint8Array | Uint8ClampedArray | Blob, headers?: Headers) => Promise<void>;
+		/**
+		 * Attempts to load the file from the cache storage
+		 * @param filePath full path of the file, including the file name and extension
+		 * @returns the cached file or undefined if the file is not found
+		 */
+		getCachedFile: (filePath: string) => Promise<Response | undefined>;
+		/**
+		 * Removes the file from the cache storage. If path does not exist, nothing happens.
+		 * @param filePath full path of the file, including the file name and extension
+		 */
+		removeCachedFile: (filePath: string) => Promise<void>;
+		/**
+		 * Removes all entries linked to this service
+		 */
+		clearServiceCache: () => Promise<void>;
+	};
+};
+export type CustomWidgetProps = {
+	/** the id of this widget in the recipe */
+	readonly widgetId: string;
+	/** the id of the recipe */
+	readonly recipeId: string;
+	/** the widget variant that was added to the workspace */
+	readonly variantId?: string;
+	/** the manifest file of the running service */
+	manifest: DeepReadOnly<LimitedManifest>;
+	serviceOnline: boolean;
+	disabled: boolean;
+	/**
+	 * Redraws the ports and their connections.
+	 * Useful when the size of your widget changes dynamically.
+	 **/
+	repaintPorts: () => void;
+	/**
+	 * Sets the value of the outputs of the widget.
+	 * IMPORTANT: Keep in mind that port changes triggered from UI components won't work
+	 * when the recipe is exported as a standalone service.
+	 **/
+	setOutputs: GlobalContext["setOutputs"];
+	/**
+	 * Invokes an `onUIEvent` in the processor file.
+	 * @param name the name of the handler to be called.
+	 * @returns a promise that resolves to the return value of the processor handler.
+	 **/
+	callProcessorHandler: <R = any>(name: string, data?: any) => Promise<R>;
+	/**
+	 * Allows the UI instance to change the default
+	 * ports definition of a widget service based on custom logic. The interface
+	 * will repaint the ports for the given widget accordingly.
+	 *
+	 * Keep in mind that calling this method while attached to other widgets will
+	 * automatically remove the links with any parent or child widget.
+	 **/
+	defineDynamicPorts: (config: DefineDynamicPortsArgs) => Promise<void>;
+	/**
+	 * Utility functions
+	 */
+	utils: ReactWidgetUtils;
+};
+export type WidgetCanvasDimensions = {
+	width: number;
+	height: number;
+};
+export type Output = Omit<TargetOutput, "value"> & {
+	value: SupportedTypes;
+};
+export type GlobalContext<T extends WidgetState = WidgetState> = {
+	useWidgetState: UseWidgetStateHook<T>;
+	setOutputs: (outputs: Output[]) => Promise<void>;
+	defineDynamicPorts: (config: DefineDynamicPortsArgs) => Promise<void>;
+	callProcessorHandler: <R = any>(name: string, data?: any) => Promise<R>;
+	setWidgetDimensions: (width: number, height: number) => void;
+	getWidgetDimensions: () => WidgetCanvasDimensions;
+	utils: ReactWidgetUtils;
+	widgetId: string;
+	recipeId: string;
+	variantId?: string;
+	manifest: LimitedManifest;
+};
+declare const PREVENT_DRAGGING_CLS = "no-dragging";
+declare const ABORT_CHILD_DRAGGING_CLS = "no-child-drag";
+declare const WIDGET_SELECTED_CLS = "widget-selected";
+export type WidgetWrapper = {
+	repaintPorts: () => void;
+	onDestroy?: () => void;
+	globalContext: GlobalContext;
+};
+/**
+ * Wraps your custom widget component with the necessary context to interact with the Hub Service.
+ * @example
+ *
+ * ```tsx
+ *  import { CustomWidgetProps, createWidgetUI } from '@kemu-io/hs-react';
+ *  import packageJson from '../package.json';
+ *
+ *  const WidgetUI = (props: CustomWidgetProps) => {
+ *
+ *    return (
+ *      <WidgetContainer>
+ *        <button>Click Me</button>
+ *      </WidgetContainer>
+ *    );
+ *  };
+ *
+ *  export default createWidgetUI(WidgetUI, packageJson.name, packageJson.version);
+ *
+ * ```
+ */
+export declare const createWidgetUI: (userWidget: (props: CustomWidgetProps) => React$1.ReactElement, serviceName: string, serviceVersion: string) => {
+	mountComponent: (containerEl: HTMLElement, props: WidgetWrapper) => Partial<WidgetUIInstance>;
+};
+
+declare namespace constants {
+	export { ABORT_CHILD_DRAGGING_CLS, PREVENT_DRAGGING_CLS, WIDGET_SELECTED_CLS };
+}
+
+export {
+	constants,
+};
+
+export {};

package/mjs/WidgetWrapper.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useCallback,useEffect,useState,useMemo,useRef}from"react";import{createRoot}from"react-dom/client";import{CacheProvider}from"@emotion/react";import createCache from"./lib/cache.js";import{setContext}from"./lib/globalContext.js";import WidgetInstanceContextProvider from"./lib/InstanceContext.js";import*as constants from"./constants.js";export{constants};const KemuService=e=>{const{repaintPorts:t,onDestroy:n,globalContext:r,getParentContext:a}=e,[s,o]=useState(null),[c,i]=useState({disabled:!1,serviceOnline:!0}),l=useRef(null),d=useRef(null),u=useRef(null),m=useCallback((e=>{l.current=e}),[]),v=useCallback((e=>{d.current=e}),[]),p=useCallback((e=>{u.current=e}),[]);useEffect((()=>(e.container&&o((t=>t||createCache(e.serviceName,e.serviceVersion,e.container))),()=>{n&&n()})),[e.container]),useEffect((()=>{const e=a();e.handleSetOutputsEvent=async e=>{u.current&&await u.current(e)},e.handleBroadcastEvent=async e=>{if(d.current)return d.current(e)},e.handleParentEvent=async e=>!!l.current&&(await l.current(e),!0),e.handleRender=e=>{i((t=>({...t,...e})))}}),[]);const f=useMemo((()=>({setOutputs:r.setOutputs,callProcessorHandler:r.callProcessorHandler,repaintPorts:t,defineDynamicPorts:r.defineDynamicPorts,utils:r.utils,widgetId:r.widgetId,recipeId:r.recipeId,manifest:r.manifest,disabled:c.disabled,variantId:r.variantId,serviceOnline:c.serviceOnline})),[r,t,c.disabled,c.serviceOnline]),h=useMemo((()=>({useOnParentEvent:m,useOnBroadcastEvent:v,useOnSetOutputsEvent:p,setWidgetDimensions:r.setWidgetDimensions,getWidgetDimensions:r.getWidgetDimensions,getWidgetProps:()=>f})),[m,v,p,f]);if(useEffect((()=>{s&&(console.log("Cache updated, repainting ports"),t&&t())}),[s]),!s||!e.container)return null;const g=e.children;return _jsx(WidgetInstanceContextProvider,{value:h,children:_jsx(CacheProvider,{value:s,children:_jsx(g,{...f})})})};export const createWidgetUI=(e,t,n)=>({mountComponent:(r,a)=>{const s=createRoot(r);if(!a.globalContext)throw new Error("`globalContext` not provided");setContext(a.globalContext);const o={};s.render(_jsx(KemuService,{...a,serviceName:t.replace(/\./g,"-").replace(/[0-9]/g,"").toLowerCase(),serviceVersion:n,container:r,getParentContext:()=>o,children:e}));const c={render:e=>{o.handleRender&&o.handleRender(e)},destroy:()=>{s.unmount()},handleParentEvent:async e=>{let t=!1;o.handleParentEvent&&(t=await o.handleParentEvent(e)),!1===t&&(c.handleParentEvent=null)},handleBroadcastEvent:async e=>{o.handleBroadcastEvent&&await o.handleBroadcastEvent(e)},handleSetOutputsEvent:async e=>{o.handleSetOutputsEvent&&await o.handleSetOutputsEvent(e)}};return c}});

package/mjs/components/ResizableContainer.js

@@ -0,0 +1,14 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useCallback,useContext}from"react";import{Resizable}from"re-resizable";import styled from"@emotion/styled";import{PREVENT_DRAGGING_CLS}from"../constants.js";import{WidgetInstanceContext}from"../lib/InstanceContext.js";import{WidgetContainer}from"./index.js";const ResizeHandle=styled.div`
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-repeat: no-repeat;
+  background-origin: content-box;
+  box-sizing: border-box;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);
+  background-position: bottom right;
+  padding: 0 3px 3px 0;
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+`,getDimensions=t=>({width:t.clientWidth,height:t.clientHeight}),ResizableContainer=t=>{const{children:e,lockAspectRatio:i,maxHeight:o,maxWidth:n,minHeight:s,minWidth:a,defaultWidth:g,defaultHeight:d,className:m,style:h,...r}=t,c=useContext(WidgetInstanceContext),l=c.getWidgetProps(),x=useCallback(((e,i,o)=>{if(l.repaintPorts(),t.onResize){const i=getDimensions(o);t.onResize(i.width,i.height,e)}}),[]),I=useCallback(((t,e,i)=>{const o=getDimensions(i);c.setWidgetDimensions(o.width,o.height)}),[]),b=c.getWidgetDimensions(),p=Math.max(a||0,64),C=Math.max(s||0,64),w=Math.max(b.width||g||0,p),u=Math.max(b.height||d||0,C);return _jsx(Resizable,{lockAspectRatio:i,minWidth:p,minHeight:C,maxWidth:n,maxHeight:o,defaultSize:{width:w,height:u},onResizeStop:I,onResize:x,enable:{bottomRight:!0,top:!1,right:!1,bottom:!1,bottomLeft:!1,left:!1,topLeft:!1,topRight:!1},handleComponent:{bottomRight:_jsx(ResizeHandle,{className:PREVENT_DRAGGING_CLS})},children:_jsx(WidgetContainer,{width:"100%",height:"100%",style:h,className:m,...r,children:e})})};export default ResizableContainer;

package/mjs/components/WidgetContainer.js

@@ -0,0 +1,12 @@
+import{jsx as _jsx}from"react/jsx-runtime";import styled from"@emotion/styled";import{WIDGET_SELECTED_CLS}from"../constants.js";import{useContext}from"react";import{WidgetInstanceContext}from"../lib/InstanceContext.js";const WidgetContainer=styled.div`
+  width: ${({cWidth:e})=>"number"==typeof e?`${e}px`:e||"64px"};
+  height: ${({cHeight:e})=>"number"==typeof e?`${e}px`:e||"64px"};
+  background-color: ${({manifest:e,disabled:t,serviceOnline:i})=>t||!i?"#bbb":e.color};
+  ${({noBorderRadius:e})=>e?"":"border-radius: 8px;"}
+  ${({noPadding:e})=>e?"":"padding: 6px;"}
+
+  /* Add a shadow when the widget is selected */
+  .${WIDGET_SELECTED_CLS} & {
+    box-shadow: 0px 0px 7px 1px ${({manifest:e,disabled:t,serviceOnline:i})=>t||!i?"#bbb":e.color};
+  }
+`,Wrap=e=>{const t=useContext(WidgetInstanceContext).getWidgetProps(),{className:i,width:o,height:n,...r}=e;return _jsx(WidgetContainer,{cWidth:o,cHeight:n,...r,...t,className:`k-hs-wrap ${i||""}`,children:e.children})};export default Wrap;

package/mjs/components/index.js

@@ -0,0 +1 @@
+import WidgetContainer from"./WidgetContainer.js";import ResizableContainer from"./ResizableContainer.js";export{WidgetContainer,ResizableContainer};

package/mjs/constants.js

@@ -0,0 +1 @@
+export const PREVENT_DRAGGING_CLS="no-dragging";export const ABORT_CHILD_DRAGGING_CLS="no-child-drag";export const WIDGET_SELECTED_CLS="widget-selected";

package/mjs/hooks/index.js

@@ -0,0 +1 @@
+import useOnBroadcastEvent from"./useOnBroadcastEvent.js";import useOnParentEvent from"./useOnParentEvent.js";import useOnSetOutputsEvent from"./useOnSetOutputsEvent.js";import useWidgetState from"./useWidgetState.js";import useReactiveWidgetState from"./useReactiveWidgetState.js";import useResizableWidgetDimensions from"./useResizableWidgetDimensions.js";export{useOnBroadcastEvent,useOnParentEvent,useOnSetOutputsEvent,useWidgetState,useReactiveWidgetState,useResizableWidgetDimensions};

package/mjs/hooks/useOnBroadcastEvent.js

@@ -0,0 +1 @@
+import{useContext}from"react";import{WidgetInstanceContext}from"../lib/InstanceContext.js";const useOnBroadcastEvent=t=>{useContext(WidgetInstanceContext).useOnBroadcastEvent(t)};export default useOnBroadcastEvent;

package/mjs/hooks/useOnParentEvent.js

@@ -0,0 +1 @@
+import{useContext}from"react";import{WidgetInstanceContext}from"../lib/InstanceContext.js";const useOnParentEvent=t=>{useContext(WidgetInstanceContext).useOnParentEvent(t)};export default useOnParentEvent;

package/mjs/hooks/useOnSetOutputsEvent.js

@@ -0,0 +1 @@
+import{useContext}from"react";import{WidgetInstanceContext}from"../lib/InstanceContext.js";const useOnSetOutputsEvent=t=>{useContext(WidgetInstanceContext).useOnSetOutputsEvent(t)};export default useOnSetOutputsEvent;

package/mjs/hooks/useReactiveWidgetState.js

@@ -0,0 +1 @@
+import{useCallback}from"react";import{getContext}from"../lib/globalContext.js";const useReactiveWidgetState=(t,e)=>{const a=getContext(),{state:o,getState:i,setState:n}=a.useWidgetState();return[{...t,...o},useCallback((async(a,o=!0)=>{let r=a;const s={...t,...i()};if("function"==typeof a&&(r=await a(s)),e){if(!e(s,r))return}return n(r,o)}),[i,t])]};export default useReactiveWidgetState;

package/mjs/hooks/useResizableWidgetDimensions.js

@@ -0,0 +1 @@
+import{getContext}from"../lib/globalContext.js";const useResizableWidgetDimensions=e=>{const t=getContext().getWidgetDimensions();return{width:t.width||e?.defaultWidth||0,height:t.height||e?.defaultHeight||0}};export default useResizableWidgetDimensions;

package/mjs/hooks/useWidgetState.js

@@ -0,0 +1 @@
+import{getContext}from"../lib/globalContext.js";const useWidgetState=()=>getContext().useWidgetState();export default useWidgetState;

package/mjs/lib/InstanceContext.js

@@ -0,0 +1 @@
+import{createContext}from"react";export const WidgetInstanceContext=createContext({useOnBroadcastEvent:()=>{},useOnParentEvent:()=>{},useOnSetOutputsEvent:()=>{},setWidgetDimensions:()=>{},getWidgetDimensions:()=>({width:0,height:0}),getWidgetProps:()=>({})});const WidgetInstanceContextProvider=WidgetInstanceContext.Provider;export default WidgetInstanceContextProvider;

package/mjs/lib/cache.js

@@ -0,0 +1 @@
+import createCache from"@emotion/cache";const create=(e,t,r)=>{const a=`${e}-${t.split(".").map((e=>e.split("").map((e=>{const t=parseInt(e);return isNaN(t)?e:String.fromCharCode(t+97)})).join(""))).join("").toLocaleString()}`;return createCache({key:a,container:r})};export default create;

package/mjs/lib/globalContext.js

@@ -0,0 +1 @@
+let context;const setContext=t=>{context=t},getContext=()=>{if(!context)throw new Error("Context not set");return context};export{setContext,getContext};

package/mjs/types/context_t.js

@@ -0,0 +1 @@
+export{};

package/mjs/types/hooks_t.js

@@ -0,0 +1 @@
+export{};

package/mjs/types/widgetUI_t.js

@@ -0,0 +1 @@
+export{};