@gorilla-engine-sdk/ge-dialogs-lib 0.5.7

package/LICENSE.md

@@ -0,0 +1,64 @@
+**IMPORTANT NOTICE: PLEASE READ CAREFULLY BEFORE DOWNLOADING, INSTALLING OR USING THE GORILLA ENGINE SDK:**
+
+- BY SIGNING THIS AGREEMENT, OR CLICKING ON THE “ACCEPT” BUTTON BELOW (IF AVAILABLE), OR BY DOWNLOADING, INSTALLING, OR USING THE GORILLA ENGINE SDK, YOU AGREE TO THE TERMS OF THIS AGREEMENT, AND ALL INCORPORATED TERMS INCLUDING GORILLA ENGINE’S PRIVACY POLICY, AS APPLICABLE, WHICH WILL BIND YOU.
+
+- IF YOU DO NOT AGREE TO THE TERMS OF THIS AGREEMENT, WE WILL NOT LICENSE THE GORILLA ENGINE SDK TO YOU AND YOU MUST DISCONTINUE THE INSTALLATION OR DOWNLOAD PROCESS OR CEASE USE OF THE UJAM GORILLA ENGINE SDK.
+
+**GORILLA ENGINE FREE TIER LICENSE**
+
+This Gorilla Engine Free Tier License ("Agreement") is entered between UJAM, Inc., a Delaware corporation (hereinafter "UJAM" or "we") and you (“Licensee” or “you”) and becomes effective once you download, install, or use the GORILLA ENGINE SDK.
+
+1. OBJECT OF AGREEMENT. This Agreement governs UJAM’s GORILLA ENGINE SDK (“SDK”) and all related software and documentation and any update, upgrades or bug fixes (collectively referred to as the "UJAM GORILLA ENGINE SDK SERVICE").
+
+2. GRANT OF LICENSE: Subject to your full compliance with all of the terms and conditions of this Agreement, we grant you a non-exclusive, revocable, nonsublicensable (except as specifically provided herein), non-transferable license to use the UJAM GORILLA ENGINE SDK SERVICE solely to: (i) download, install, and use the UJAM GORILLA ENGINE SDK SERVICE for the sole purpose of building audio plugins such as virtual instruments and effects ("Application") and using such Application for music productions and live performances. **HOWEVER, YOU MUST NOT SHARE OR OTHERWISE EXPLOIT YOUR GORILLA ENGINE BASED APPLICATION WITH ANY THIRD PARTY UNTIL YOU HAVE ACQUIRED ONE OF THE ADD-ON LICENSES AS FURTHER DESCRIBED IN SECTION 8 OF THIS AGREEMENT.** If you have any questions regarding this license and allowed uses of the SDK, please reach out to us via email at support@gorilla-engine.com.
+
+3. LICENSE RESTRICTIONS AND OBLIGATIONS: Except as expressly and unambiguously authorized under this Agreement, you must not
+   1. copy, rent, lease, sell, transfer, assign, sublicense, disassemble, reverse engineer or decompile (except to the limited extent expressly authorized by applicable statutory law), modify, create derivative works from, or alter any part of the UJAM GORILLA ENGINE SDK SERVICE;
+   2. sublicense your Application to end-users until you have acquired a license as further described in Section 8 of this Agreement.
+   3. use any automated means, including, without limitation, agents, robots, scripts or spiders, to access the UJAM GORILLA ENGINE SDK SERVICE or bypass the UJAM GORILLA ENGINE SDK SERVICE or to interfere or attempt to interfere with the proper working of the UJAM GORILLA ENGINE SDK SERVICE;
+   4. use the UJAM GORILLA ENGINE SDK SERVICE as a dynamic-link library (for clarity: the SDK shall solely be used as a statically linked library); (g) use the SDK or any part of the SDK in connection with building or distributing your own or a third-party SDK or framework; or (h) use the Licensed Software to train artificial intelligence, your own or a third-party algorithm, and/or any other kind of machine learning processes.
+   5. use the UJAM GORILLA ENGINE SDK SERVICE for the benefit of a third party, other than end users of your Applications as expressly authorized by this Agreement;
+   6. use the UJAM GORILLA ENGINE SDK SERVICE to implement or enhance a product or service that is competitive with the UJAM GORILLA ENGINE SDK SERVICE;
+   7. modify and/or rename the UJAM binary libraries; or
+   8. otherwise engage in activity that interrupts the proper working of the UJAM GORILLA ENGINE SDK SERVICE or is otherwise fraudulent or illegal.
+
+Furthermore, you agree
+
+9. display attribution on all embodiments and uses of the Gorilla Engine SDK by displaying the language “powered by Gorilla Engine” ; and  
+   10. to contact UJAM once you intend to Distribute (as defined in Section 8\) your Application to obtain the appropriate license to do so – which you agree is required for such a scenario (as further described in Section 8 below).
+
+   We reserve the right to discontinue, modify, cease support of, and alter the pricing structure of this Agreement (the Gorilla Engine Free Tier License) of the UJAM GORILLA ENGINE SDK SERVICE.
+
+10. LICENSE TO UJAM: You hereby grant to us the non-exclusive, perpetual, worldwide, royalty-free right and license to any and all content ("Content") provided by you or your end users in connection with your use or your end users' use of the SDK, including but not limited to feedback or other contributions made towards the UJAM GORILLA ENGINE SDK SERVICE (including so-called re-usable components, made available by UJAM via its repositories), in order for us to provide and improve the UJAM GORILLA ENGINE SDK SERVICE. You represent and warrant that all Content provided by you shall not violate any third party rights and shall be free of any and all claims.
+
+11. REPRESENTATIONS AND WARRANTIES: You represent and warrant that you: (i) are fully authorized to enter into this agreement; (ii) shall use the UJAM GORILLA ENGINE SDK SERVICE in compliance with all applicable local, state, national and foreign laws, treaties and regulations, including those related to data privacy, international communications, export laws and the transmission of technical or personal data laws; (iii) shall not (and shall not permit any third party, including a permitted sublicensee to), directly or indirectly, take any action or upload, download, post, submit or otherwise distribute or facilitate distribution of Content or any material on or through the UJAM GORILLA ENGINE SDK SERVICE, that: (a) infringes any patent, trademark, trade secret, copyright, right of publicity/privacy or other right of any third party or induces infringement thereof; (b) breaches any third party contract or obligation; (c) is unlawful, threatening, abusive, harassing, defamatory, deceptive, fraudulent, invasive of another's privacy, tortious, obscene, offensive, or profane.
+
+12. OWNERSHIP AND PROPRIETARY RIGHTS: As between UJAM and Licensee (and any permitted sublicensees), the SDK and all intellectual property rights in and to the UJAM GORILLA ENGINE SDK SERVICE, are and shall at all times remain the sole and exclusive property of UJAM and are protected by applicable intellectual property laws and treaties. You shall not obscure, remove or otherwise alter our copyright or trademark notices or other proprietary rights' notices affixed to or within the SDK or elsewhere.
+
+13. SUPPORT AND UPGRADES: This Agreement does not entitle you to any support for the SDK, unless you enter into a separate agreement with us in writing, either signed by both parties or agreed upon via click-through agreement. Any such support provided by us shall be subject to the terms and disclaimers of this Agreement.
+
+14. ADD-ON LICENSES FOR A PERMITTED DISTRIBUTION OF GORILLA ENGINE BASED APPLICATION:
+    1. **Add-On Licenses (Upgrade to Pro Tier):** You agree to contact UJAM to obtain one of our commercial license (including the so-called “Pro Tier” License, including available optional Add-On upgrades which can be ) (collectively referred to as “Add-On Licenses”), whichever deemed to be appropriate for your intended use of the SDK, to Distribute (as defined below in subsection ii.) your Gorilla Engine based Application to end-users. Such Add-On License shall supersede this Agreement, as agreed to by the parties.
+    2. **Failure to comply with Section 8:** If you fail to comply with Section 8(i) by Distributing the SDK as part of an Application beyond the allowed use under this Agreement, you shall immediately contact UJAM and pay to UJAM a royalty per each Distribution (as defined below) in an amount as solely determined by UJAM. A Distribution refers to either an embedded, pre-bundled, pre-installed platform application or software application that is downloaded, delivered, or served to a user or device by any means of distribution including directly from you or through any platform, including cloud based platforms. In avoidance of doubt, any subscription or rental shall be considered a Distribution.
+    3. **Audit Rights**: Should (i) you fail to obtain an Add-On License and distribute the SDK as part of an Application, or should (ii) UJAM believe that you distribute the Application without having obtained an Add-On License, then UJAM shall have the right, upon reasonable notice, to audit/inspect any premises, computer(s), and networks on or in which the SDK is installed or used to monitor compliance with the terms of this Agreement, including but not limited to confirming the number of Distributions of the Application. If an audit reveals any unauthorized use, in addition to all other remedies available to UJAM, you shall be responsible to UJAM for all reasonable expenses related to the audit.
+    4. **Third Party Libraries:** You acknowledge that certain third-party libraries, including JUCE 6 ([https://juce.com/legal/juce-6-license/](https://juce.com/legal/juce-6-license/)), may be used in connection with the SDK, subject to their respective license agreements as further disclosed by UJAM. It is your sole responsibility to abide to such third-party terms, which may include your obligations, amongst others, to provide certain disclosures accompanying your Gorilla Engine based Software and/or acquiring a JUCE license (if applicable).
+
+15. DATA PROTECTION AND PRIVACY: We may collect and process information about you and your use of the Gorilla Engine SDK, some of which may amount to personal data, subject to Gorilla Engine’s Privacy Policy.
+
+16. TRADE SECRETS AND CONFIDENTIAL INFORMATION: You acknowledges that the SDK contains valuable trade secrets of UJAM and, should you access any such trade secrets in violation of this Agreement, you agree to maintain the confidentiality of the trade secrets of the SDK using at least the same degree of care that you use with your own confidential information.
+
+17. WARRANTY DISCLAIMER: THE UJAM GORILLA ENGINE SDK SERVICE, INCLUDING THE SDK, IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE LAW, WE DISCLAIM ALL WARRANTIES, WHETHER EXPRESS, IMPLIED OR STATUTORY, REGARDING THE UJAM GORILLA ENGINE SDK SERVICE, INCLUDING WITHOUT LIMITATION ANY AND ALL IMPLIED WARRANTIES OF MERCHANTABILITY, ACCURACY, RESULTS OF USE, RELIABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE, AVAILABILITY, PERFORMANCE, BANDWIDTH, AND NON-INFRINGEMENT OF THIRD-PARTY RIGHTS. FURTHER, WE DISCLAIM ANY WARRANTY THAT LICENSEE'S USE OF THE UJAM GORILLA ENGINE SDK SERVICE WILL BE AVAILABLE, UNINTERRUPTED OR ERROR FREE.
+
+18. LIABILITY LIMITATION: REGARDLESS OF WHETHER ANY REMEDY SET FORTH HEREIN FAILS OF ITS ESSENTIAL PURPOSE OR OTHERWISE, AND EXCEPT FOR BODILY INJURY, IN NO EVENT WILL WE OR OUR CONTRACTORS, EMPLOYEES OR AFFILIATES BE LIABLE TO YOU OR TO ANY THIRD PARTY UNDER ANY TORT, CONTRACT, NEGLIGENCE, STRICT LIABILITY OR OTHER LEGAL OR EQUITABLE THEORY FOR ANY LOST PROFITS, LOST OR CORRUPTED DATA, COMPUTER FAILURE OR MALFUNCTION, INFRINGEMENT, INTERRUPTION OF BUSINESS, OR OTHER SPECIAL, INDIRECT, INCIDENTAL OR CONSEQUENTIAL DAMAGES OF ANY KIND ARISING OUT OF THE USE OR INABILITY TO USE THE UJAM GORILLA ENGINE SDK SERVICE, EVEN IF WE HAVE BEEN ADVISED OF THE POSSIBILITY OF SUCH LOSS OR DAMAGES AND WHETHER OR NOT SUCH LOSS OR DAMAGES ARE FORESEEABLE. IN NO EVENT SHALL OUR TOTAL LIABILITY TO YOU OR ANY THIRD PARTY EXCEED TEN USD DOLLARS. ANY CLAIM ARISING OUT OF OR RELATING TO THIS AGREEMENT MUST BE BROUGHT WITHIN ONE (1) YEAR AFTER THE OCCURRENCE OF THE EVENT GIVING RISE TO SUCH CLAIM.
+
+19. INDEMNITY: You agree that we shall have no liability whatsoever for your or your end users of the UJAM GORILLA ENGINE SDK SERVICE. You shall indemnify, defend and hold us harmless from any and all claims, damages, liabilities, costs, and fees (including reasonable attorneys' fees) arising from your or your end users' use of the UJAM GORILLA ENGINE SDK SERVICE or for any breach of this Agreement, including any breach of the representations and warranties you made herein.
+
+20. TERM AND TERMINATION: This Agreement shall continue until terminated as set forth in this Section. Either party may terminate this Agreement at any time, for any reason, or for no reason including, but not limited to, if you violate any provision of this Agreement. We reserve the right to cancel, amend, or modify the SDK at any time. Any termination of this Agreement shall also terminate the license granted hereunder. Upon termination of this Agreement for any reason, you shall immediately destroy and remove from all computers, hard drives, networks, and other storage media all copies of the SDK, and shall so certify to us that such actions have occurred (including all cached ephemeral copies). Sections 5 (“REPRESENTATIONS AND WARRANTIES”), 6 (“OWNERSHIP AND PROPRIETARY RIGHTS”), 10 (“TRADE SECRETS AND CONFIDENTIAL INFORMATION”), 11 (“WARRANTY DISCLAIMER”), 12 (“LIABILITY LIMITATION”), 13 (“INDEMNITY”), 16 (“GOVERNING LAW”), 18 (“GENERAL PROVISIONS”) shall survive termination of this Agreement.
+
+21. EXPORT CONTROLS: You shall comply with all applicable export laws and restrictions and regulations and you shall not export, or allow the export or re-export of the SDK in violation of any such restrictions, laws, or regulations.
+
+22. GOVERNING LAW: This Agreement shall be governed by New York law, excluding conflict of law provisions. The parties agree to and submit to the exclusive jurisdiction of courts located in New York City, New York. The application of the United Nations Convention of Contracts for the International Sale of Goods is expressly excluded.
+
+23. PREVAILING PARTY. Notwithstanding Section 12 (“LIABILITY LIMITATION”), in the event of any court action relating to enforcement of this Agreement, including injunctive relief, the non-prevailing party shall reimburse the prevailing party for all reasonable attorneys’ fees and costs, including expert witness fees, resulting therefrom.
+
+24. GENERAL PROVISIONS. If any part of this Agreement is found void or unenforceable, it will not affect the validity of the balance of the Agreement, which shall remain valid and enforceable according to its terms. This Agreement may only be modified by written agreement between the Parties. Updates to the UJAM GORILLA ENGINE SDK SERVICE may be licensed to you by UJAM with additional or different terms. UJAM further reserves rights, in its discretion, not to license updates. This is the entire Agreement between UJAM and you relating to the UJAM GORILLA ENGINE SDK SERVICE and it supersedes any prior representations, discussions, undertakings, communications, or advertising relating to the UJAM GORILLA ENGINE SDK SERVICE. This Agreement is not assignable by you.

package/README.md

@@ -0,0 +1,376 @@
+# @gorilla-engine-sdk/ge-dialogs-lib
+
+A React dialog library for Gorilla Engine audio plugin interfaces, featuring:
+
+- Blocking and non-blocking modals
+- Ready-to-use message, confirmation, and custom-content modal components
+- Tooltips positioned from Gorilla Engine native component refs
+- Timed notifications with optional stacking
+- Shared, customizable styles for all dialog types
+- Runtime updates when the plugin UI size changes
+
+This library is designed for Gorilla Engine React, a custom React reconciler that renders to native Gorilla Engine UI components.
+
+## Install
+
+```bash
+npm install @gorilla-engine-sdk/ge-dialogs-lib
+```
+
+**Peer dependency:** `@gorilla-engine-sdk/gorilla-engine-react` 1.x
+
+## Quick Start
+
+Render `Dialogs` around every component that uses a dialog hook. The wrapper installs the modal, tooltip, notification, and style contexts and renders their roots above your application content.
+
+```tsx
+import * as React from 'react';
+import * as GEReact from '@gorilla-engine-sdk/gorilla-engine-react';
+import {
+  DefaultModal,
+  Dialogs,
+  useModal,
+  useNotification,
+  useToolTip,
+} from '@gorilla-engine-sdk/ge-dialogs-lib';
+
+const PLUGIN_WIDTH = 920;
+const PLUGIN_HEIGHT = 590;
+
+function PluginUI() {
+  const helpButtonRef = React.useRef<any>(null);
+  const [showNotification] = useNotification();
+  const [showToolTip, hideToolTip] = useToolTip();
+  const [showModal, hideModal] = useModal(() => (
+    <DefaultModal
+      title="Reset settings?"
+      message="This restores all settings to their factory values."
+      isBlocking
+      isBlockingClosable
+      closeTrigger
+      cancelTrigger
+      cancelTriggerLabel="Cancel"
+      onCancelTrigger={hideModal}
+      approveTrigger
+      approveTriggerLabel="Reset"
+      onApproveTrigger={() => {
+        resetSettings();
+        hideModal();
+        showNotification({ message: 'Settings reset' });
+      }}
+    />
+  ));
+
+  return (
+    <geLabel width={PLUGIN_WIDTH} height={PLUGIN_HEIGHT}>
+      <geButton x={20} y={20} width={140} height={32} text="Reset" onClick={showModal} />
+      <geButton
+        ref={helpButtonRef}
+        x={180}
+        y={20}
+        width={32}
+        height={32}
+        text="?"
+        onMouseEnter={() => showToolTip(helpButtonRef.current, 'Reset help')}
+        onMouseExit={hideToolTip}
+      />
+    </geLabel>
+  );
+}
+
+function App() {
+  return (
+    <Dialogs
+      styleState={{
+        pluginWidth: PLUGIN_WIDTH,
+        pluginHeight: PLUGIN_HEIGHT,
+      }}
+    >
+      <PluginUI />
+    </Dialogs>
+  );
+}
+
+GEReact.createUI(<App />, PLUGIN_WIDTH, PLUGIN_HEIGHT);
+```
+
+## Modals
+
+### `useModal`
+
+```typescript
+const [showModal, hideModal] = useModal(component, inputs?, isBlocking?, zIndex?);
+```
+
+Registers a function component with the nearest `Dialogs` or `ModalProvider`. It returns stable callbacks that show and hide that modal. Class components are not supported.
+
+| Argument     | Type                      | Default | Description                                                                                                                                           |
+| ------------ | ------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `component`  | `React.FunctionComponent` |         | Function component rendered when the modal is shown.                                                                                                  |
+| `inputs`     | `React.DependencyList`    | `[]`    | Values that recreate the registered component when they change. Include every changing value used by the component, or read changing data from a ref. |
+| `isBlocking` | `boolean`                 | `true`  | Compatibility argument. Set blocking behavior on the rendered `Modal` or `DefaultModal` with its `isBlocking` prop.                                   |
+| `zIndex`     | `string`                  |         | Optional registration key. Normally the hook generates one automatically.                                                                             |
+
+The modal is also removed when the component using the hook unmounts.
+
+### `DefaultModal`
+
+`DefaultModal` displays a title and message using the shared modal style. It accepts all `ModalProps` plus a required `message` string.
+
+```tsx
+const [showError, hideError] = useModal(() => (
+  <DefaultModal
+    title="Unable to load preset"
+    message="The selected preset file could not be read."
+    isBlocking
+    closeTrigger
+    approveTrigger
+    approveTriggerLabel="OK"
+    onApproveTrigger={hideError}
+    onCancelTrigger={hideError}
+  />
+));
+```
+
+The default cancel and approve labels are `Cancel` and `OK`.
+
+### `Modal`
+
+Use `Modal` directly when the dialog needs custom native content. Children are rendered below the header inside the modal's horizontal content margins.
+
+```tsx
+const [showRename, hideRename] = useModal(() => (
+  <Modal
+    title="Rename preset"
+    modalWidth={420}
+    modalHeight={240}
+    isBlocking
+    closeTrigger
+    cancelTrigger
+    cancelTriggerLabel="Cancel"
+    onCancelTrigger={hideRename}
+    approveTrigger
+    approveTriggerLabel="Save"
+    onApproveTrigger={() => {
+      savePresetName();
+      hideRename();
+    }}
+  >
+    <geTextEditor x={0} y={20} width={388} height={32} text="New preset name" />
+  </Modal>
+));
+```
+
+### `ModalProps`
+
+| Property                  | Type          | Description                                                                                                |
+| ------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------- |
+| `title`                   | `string`      | Required title displayed in the modal header.                                                              |
+| `modalStyle`              | `ModalsStyle` | Complete style override for this modal.                                                                    |
+| `modalWidth`              | `number`      | Width override; otherwise the active style's `modalWidth` is used.                                         |
+| `modalHeight`             | `number`      | Height override; otherwise the active style's `modalHeight` is used.                                       |
+| `x`, `y`                  | `number`      | Absolute position overrides. Alignment rules are used when omitted.                                        |
+| `isBlocking`              | `boolean`     | Intercepts mouse clicks across the plugin and shows the blocking background.                               |
+| `isBlockingClosable`      | `boolean`     | Calls `onCancelTrigger` when the blocking background is clicked.                                           |
+| `blockingBackgroundColor` | `string`      | Per-modal blocking background color override.                                                              |
+| `closeTrigger`            | `boolean`     | Shows the header close button. It calls `onCancelTrigger`.                                                 |
+| `cancelTrigger`           | `boolean`     | Shows the footer cancel button.                                                                            |
+| `cancelTriggerEnabled`    | `boolean`     | Enables or disables the cancel button.                                                                     |
+| `cancelTriggerLabel`      | `string`      | Cancel button text.                                                                                        |
+| `onCancelTrigger`         | `() => void`  | Handles close, cancel, and closable-background actions. Call `hideModal` here when the modal should close. |
+| `approveTrigger`          | `boolean`     | Shows the footer approve button.                                                                           |
+| `approveTriggerEnabled`   | `boolean`     | Enables or disables the approve button.                                                                    |
+| `approveTriggerLabel`     | `string`      | Approve button text.                                                                                       |
+| `onApproveTrigger`        | `() => void`  | Handles approval. Call `hideModal` here when the modal should close.                                       |
+| `children`                | `ReactNode`   | Custom Gorilla Engine React content.                                                                       |
+
+## Tooltips
+
+### `useToolTip`
+
+```typescript
+const [showToolTip, hideToolTip] = useToolTip(options?);
+```
+
+`showToolTip(component, text, style?)` displays a tooltip after the configured delay. Pass the native component instance from a ref, not a browser element. The tooltip is centered below the target when space permits and moves above it near the bottom edge of the plugin.
+
+```tsx
+const buttonRef = React.useRef<any>(null);
+const [showToolTip, hideToolTip] = useToolTip();
+
+<geButton
+  ref={buttonRef}
+  width={32}
+  height={32}
+  text="?"
+  onMouseEnter={() => showToolTip(buttonRef.current, 'Open the user guide')}
+  onMouseExit={hideToolTip}
+/>;
+```
+
+The optional hook-level `toolTipStyle` applies to every tooltip from that hook. The style passed to `showToolTip` takes precedence over the hook-level and global styles.
+
+## Notifications
+
+### `useNotification`
+
+```typescript
+const [showNotification, hideNotification] = useNotification(options?);
+```
+
+Show a notification by passing a message and, optionally, a complete notification style override:
+
+```tsx
+const [showNotification] = useNotification();
+
+showNotification({ message: 'Preset saved successfully' });
+
+showNotification({
+  message: 'Could not save preset',
+  notificationStyle: {
+    ...dialogsDefaultStyle.notification!,
+    container: {
+      ...dialogsDefaultStyle.notification!.container,
+      backgroundColor: '9E2A2B',
+    },
+  },
+});
+```
+
+Notifications dismiss automatically after `notification.duration` milliseconds. The default duration is 2500 ms. Multiple active notifications render together; setting `stackNotifications` enables offset stacking.
+
+The hook also returns `hideNotification` for API compatibility. Current notification identifiers are generated internally, so normal integrations should rely on automatic dismissal.
+
+## Styling
+
+Pass a `DialogsStylesState` object to `Dialogs`. Only `pluginWidth` and `pluginHeight` are required; omitted modal, tooltip, and notification sections fall back to `dialogsDefaultStyle`.
+
+When customizing a section, derive it from the defaults because each supplied section is treated as a complete style object rather than deep-merged.
+
+```tsx
+import {
+  Dialogs,
+  DialogsStylesState,
+  dialogsDefaultStyle,
+} from '@gorilla-engine-sdk/ge-dialogs-lib';
+
+const dialogStyles: DialogsStylesState = {
+  ...dialogsDefaultStyle,
+  pluginWidth: 920,
+  pluginHeight: 590,
+  modal: {
+    ...dialogsDefaultStyle.modal!,
+    modal: {
+      ...dialogsDefaultStyle.modal!.modal,
+      backgroundColor: '2F333F',
+      border: { width: 1, color: '3F4354' },
+    },
+    approveButton: {
+      ...dialogsDefaultStyle.modal!.approveButton,
+      backgroundColor: '5177E0',
+      textColor: 'FFFFFF',
+    },
+  },
+  notification: {
+    ...dialogsDefaultStyle.notification!,
+    duration: 3000,
+    container: {
+      ...dialogsDefaultStyle.notification!.container,
+      backgroundColor: '20242E',
+    },
+  },
+  toolTip: {
+    ...dialogsDefaultStyle.toolTip!,
+    showDelay: 500,
+  },
+};
+
+<Dialogs styleState={dialogStyles}>
+  <PluginUI />
+</Dialogs>;
+```
+
+### Style State
+
+| Property             | Type                 | Description                                                   |
+| -------------------- | -------------------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
+| `pluginWidth`        | `number`             | Width of the full plugin UI and dialog overlay.               |
+| `pluginHeight`       | `number`             | Height of the full plugin UI and dialog overlay.              |
+| `modal`              | `ModalsStyle`        | Modal alignment, dimensions, colors, and component props.     |
+| `notification`       | `NotificationsStyle` | Notification alignment, duration, container, and label props. |
+| `toolTip`            | `ToolTipsStyle`      | Tooltip delay, container, and label props.                    |
+| `stackNotifications` | `{ direction: 'up'   | 'down' }`                                                     | Enables notification stacking. The direction value is reserved for stack configuration. |
+
+All `modal`, `title`, `message`, `dividerLine`, `container`, and `label` style entries accept the corresponding partial Gorilla Engine React component props. Button styles accept partial `GEButtonProps`.
+
+### Updating Plugin Size
+
+If the plugin can resize, update the dialog overlay dimensions from a component inside `Dialogs`:
+
+```tsx
+import {
+  DialogsStylesDispatchTypes,
+  useDialogsStylesStateDispatch,
+} from '@gorilla-engine-sdk/ge-dialogs-lib';
+
+function ResizeListener({ width, height }: { width: number; height: number }) {
+  const dispatch = useDialogsStylesStateDispatch();
+
+  React.useEffect(() => {
+    dispatch({
+      type: DialogsStylesDispatchTypes.changePluginSize,
+      payload: { width, height },
+    });
+  }, [dispatch, width, height]);
+
+  return null;
+}
+```
+
+Use `useDialogsStylesState()` to read the current style state from descendants.
+
+## Default Layout
+
+The exported `dialogsDefaultStyle` uses a 1024 x 768 plugin area with:
+
+- A centered 400 x 220 modal and translucent blocking background
+- Notifications aligned 30 px from the bottom-right corner
+- A 400 ms tooltip delay with automatic edge-aware placement
+- Native component colors written as Gorilla Engine hex strings without `#`
+
+Override `pluginWidth` and `pluginHeight` to match the dimensions passed to `GEReact.createUI`.
+
+## Exported API
+
+| Export                          | Purpose                                                                |
+| ------------------------------- | ---------------------------------------------------------------------- |
+| `Dialogs`                       | Recommended top-level provider for all dialog types and shared styles. |
+| `DefaultModal`                  | Message modal built on `Modal`.                                        |
+| `DefaultModalProps`             | Props type for `DefaultModal`.                                         |
+| `Modal`                         | Base modal component for custom content.                               |
+| `ModalProps`                    | Props type for `Modal`.                                                |
+| `useModal`                      | Registers and controls a modal function component.                     |
+| `useToolTip`                    | Shows and hides tooltips anchored to native component refs.            |
+| `DefaultToolTip`                | Default tooltip renderer. Most consumers use it through `useToolTip`.  |
+| `useNotification`               | Shows timed notifications.                                             |
+| `DialogsStylesState`            | Shared dialog style-state type.                                        |
+| `DialogsStylesDispatchTypes`    | Action names for style-state updates.                                  |
+| `useDialogsStylesState`         | Reads the current shared style state.                                  |
+| `useDialogsStylesStateDispatch` | Dispatches shared style-state updates.                                 |
+| `dialogsDefaultStyle`           | Complete default style state.                                          |
+| `ModalProvider`                 | Low-level modal provider used by `Dialogs`.                            |
+| `ModalProviderProps`            | Props type for `ModalProvider`.                                        |
+| `ErrorBoundary`                 | Native-label error boundary used by the built-in dialog components.    |
+| `GE_DIALOGS_LIB`                | Log prefix constant (`[ge-dialogs-lib]`).                              |
+
+For normal application setup, prefer `Dialogs` over constructing the individual providers yourself.
+
+## Error Handling
+
+Calling a hook outside its provider throws an error. In practice, ensure the hook is called by a descendant of `Dialogs`, not by the same component that returns the `Dialogs` wrapper.
+
+The built-in modal, tooltip, and notification components use `ErrorBoundary`. If rendering fails, it logs the error and replaces that dialog with a native `<geLabel>` containing error information.
+
+## License
+
+[GORILLA ENGINE FREE TIER LICENSE](./LICENSE.md)

package/dist/Dialogs.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { DialogsStyleState } from './DialogsStyleState';
+type DialogsProps = {
+    styleState?: DialogsStyleState;
+    children: any;
+};
+export declare function Dialogs(props: DialogsProps): React.JSX.Element;
+export {};

package/dist/Dialogs.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialogs = Dialogs;
+const React = __importStar(require("react"));
+const NotificationProvider_1 = require("./notifications/NotificationProvider");
+const ToolTipProvider_1 = require("./tooltips/ToolTipProvider");
+const ModalProvider_1 = require("./modals/ModalProvider");
+const DialogsStyleState_1 = require("./DialogsStyleState");
+const dialogsDefaultStyle_1 = require("./dialogsDefaultStyle");
+function Dialogs(props) {
+    const styleState = React.useMemo(() => (props.styleState ? props.styleState : dialogsDefaultStyle_1.dialogsDefaultStyle), [props.styleState]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DialogsStyleState_1.DialogsStylesProvider, { state: styleState },
+            React.createElement(NotificationProvider_1.NotificationProvider, { styleState: props.styleState },
+                React.createElement(ToolTipProvider_1.ToolTipProvider, { styleState: props.styleState },
+                    React.createElement(ModalProvider_1.ModalProvider, { styleState: props.styleState }, props.children))))));
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGlhbG9ncy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9EaWFsb2dzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQVdBLDBCQWdCQztBQTNCRCw2Q0FBK0I7QUFDL0IsK0VBQTRFO0FBQzVFLGdFQUE2RDtBQUM3RCwwREFBdUQ7QUFDdkQsMkRBQStFO0FBQy9FLCtEQUE0RDtBQU01RCxTQUFnQixPQUFPLENBQUMsS0FBbUI7SUFDekMsTUFBTSxVQUFVLEdBQUcsS0FBSyxDQUFDLE9BQU8sQ0FDOUIsR0FBRyxFQUFFLENBQUMsQ0FBQyxLQUFLLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyx5Q0FBbUIsQ0FBQyxFQUNqRSxDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUMsQ0FDbkIsQ0FBQztJQUNGLE9BQU8sQ0FDTDtRQUNFLG9CQUFDLHlDQUFxQixJQUFDLEtBQUssRUFBRSxVQUFVO1lBQ3RDLG9CQUFDLDJDQUFvQixJQUFDLFVBQVUsRUFBRSxLQUFLLENBQUMsVUFBVTtnQkFDaEQsb0JBQUMsaUNBQWUsSUFBQyxVQUFVLEVBQUUsS0FBSyxDQUFDLFVBQVU7b0JBQzNDLG9CQUFDLDZCQUFhLElBQUMsVUFBVSxFQUFFLEtBQUssQ0FBQyxVQUFVLElBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBaUIsQ0FDN0QsQ0FDRyxDQUNELENBQ3ZCLENBQ0osQ0FBQztBQUNKLENBQUMifQ==

package/dist/DialogsStyleState.d.ts

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { GEButtonProps, GELabelProps } from '@gorilla-engine-sdk/gorilla-engine-react';
+export type DialogsStyleState = {
+    /** The width of the plugin */
+    pluginWidth: number;
+    /** The height of the plugin */
+    pluginHeight: number;
+    /** Definitions of Modals */
+    modal?: ModalsStyle;
+    /** Definitions of Notifications */
+    stackNotifications?: {
+        direction: 'up' | 'down';
+    };
+    notification?: NotificationsStyle;
+    /** Definitions of ToolTips */
+    toolTip?: ToolTipsStyle;
+};
+export type ModalsStyle = {
+    /** Horizontal alignment of dialog */
+    horizontalAlign: DialogHorizontalAlign;
+    /** Horizontal offset in Pixels */
+    horizontalOffset?: number;
+    headerHeight: number;
+    horizontalContentMargin: number;
+    /** Vertical alignment of dialog */
+    verticalAlign: DialogVerticalAlign;
+    /** Vertical offset in Pixels */
+    verticalOffset?: number;
+    /** Default width of modal */
+    modalWidth: number;
+    /** Default height of modal */
+    modalHeight: number;
+    /** Background/blocking color in case modal is blocking underlying ui */
+    blockingBackgroundColor: string;
+    /** Modal container - can have all props of geLabel */
+    modal: Partial<GELabelProps>;
+    /** Modal title - can have all props of geLabel */
+    title: Partial<GELabelProps>;
+    dividerLine?: Partial<GELabelProps>;
+    /** Modal message - can have all props of geLabel */
+    message: Partial<GELabelProps>;
+    /** Cancel/abort button - can have all props of geLabel */
+    cancelButton: Partial<GEButtonProps>;
+    /** Approve/ok button - can have all props of geLabel */
+    approveButton: Partial<GEButtonProps>;
+    /** x/close button - can have all props of geLabel */
+    closeButton: Partial<GEButtonProps>;
+    /** x/close button positioning. Close button will be top-left/top-right in header-area. space is used for x/y distance */
+    closeButtonPosition: {
+        position: 'left' | 'right';
+        space: number;
+    };
+};
+export type NotificationsStyle = {
+    /** Horizontal alignment of dialog */
+    horizontalAlign: DialogHorizontalAlign;
+    /** Horizontal offset in Pixels */
+    horizontalOffset?: number;
+    /** Vertical alignment of dialog */
+    verticalAlign: DialogVerticalAlign;
+    /** Vertical offset in Pixels */
+    verticalOffset?: number;
+    /** Duration in ms - how long the Notification is displayed */
+    duration?: number;
+    /** Container of Notification  - can have all props of geLabel */
+    container: Partial<GELabelProps>;
+    /** Label of Notification  - can have all props of geLabel */
+    label: Partial<GELabelProps>;
+};
+export type ToolTipsStyle = {
+    /** Delay in ms - how long till ToolTip is displayed */
+    showDelay?: number;
+    /** Container of ToolTip  - can have all props of geLabel */
+    container: Partial<GELabelProps>;
+    /** Label of ToolTip  - can have all props of geLabel */
+    label: Partial<GELabelProps>;
+};
+export declare enum DialogHorizontalAlign {
+    LEFT = "LEFT",
+    RIGHT = "RIGHT",
+    CENTER = "CENTER"
+}
+export declare enum DialogVerticalAlign {
+    TOP = "top",
+    BOTTOM = "bottom",
+    CENTER = "center"
+}
+/**
+ *
+ */
+export declare enum DialogsStylesDispatchTypes {
+    changePluginSize = "changePluginSize"
+}
+type DialogsStylesPayload = {
+    [DialogsStylesDispatchTypes.changePluginSize]: {
+        width: number;
+        height: number;
+    };
+};
+export type DialogsStylesActions = ActionMap<DialogsStylesPayload>[keyof ActionMap<DialogsStylesPayload>];
+export declare const dialogsStylesReducer: (state: DialogsStyleState, action: DialogsStylesActions) => DialogsStyleState;
+export declare const DialogsStylesContext: React.Context<DialogsStyleState | undefined>;
+export declare const DialogsStylesDispatchContext: React.Context<React.Dispatch<{
+    type: DialogsStylesDispatchTypes.changePluginSize;
+    payload: {
+        width: number;
+        height: number;
+    };
+}> | undefined>;
+type DialogsStylesProviderProps = {
+    state: DialogsStyleState;
+    children?: React.ReactNode;
+};
+export declare const DialogsStylesProvider: React.FC<DialogsStylesProviderProps>;
+export declare function useDialogsStylesState(): DialogsStyleState;
+export declare function useDialogsStylesStateDispatch(): React.Dispatch<DialogsStylesActions>;
+export type ActionMap<M extends {
+    [index: string]: any;
+}> = {
+    [Key in keyof M]: M[Key] extends undefined ? {
+        type: Key;
+    } : {
+        type: Key;
+        payload: M[Key];
+    };
+};
+export {};