{\n text: string;\n}\n\nconst TestModal = ({ text, resolve }: TestModalProps): ReactElement => {\n const doSomething = () => {\n resolve(10); // close modal and return 10\n };\n\n return (\n \n \n alert('help link')} />\n {text}\n \n \n Dismiss\n \n Continue onClick\n \n Continue resolve value\n \n \n );\n};\n```\n\n**Invoke the modal** — use `useShowAsyncModal`, await the result:\n\n```tsx\nimport { useShowAsyncModal } from '@linzjs/windows';\n\nexport const TestModalUsage = () => {\n // modalOwnerRef is only required if you have popout windows\n const { showModal, modalOwnerRef } = useShowAsyncModal();\n\n const showModalHandler = async () => {\n const result = await showModal(TestModal, { text: \"I'm generic modal content\" }, { showOnAllWindows: true });\n\n if (!result) return alert('Modal closed');\n alert(`Modal result is: ${String(result)}`);\n };\n\n // Add modalOwnerRef so that modals work in popout windows\n return (\n \n \n
\n );\n};\n```\n\n---\n\n### Prefab Modal\n\nPre-built modals for common use cases: `outline`, `info`, `warning`, `error`, `success`, `progress`, and `blocked`.\n\n| Outline | Info | Warning | Error |\n| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |\n|  |  |  |  |\n\n| Success | Progress | Blocked | Custom buttons |\n| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |\n|  |  |  |  |\n\n**Setup** — same `LuiModalAsyncContextProvider` as above.\n\n**Invoke** — use `useLuiModalPrefab`:\n\n```tsx\nimport { useLuiModalPrefab, LuiModalDontShowSessionRemove } from '@linzjs/windows';\n\nexport const PrefabModalUsage = () => {\n const { modalOwnerRef, showPrefabModal } = useLuiModalPrefab();\n\n return (\n \n {/* Info */}\n \n void showPrefabModal({\n level: 'info',\n title: 'You are a fantastic person',\n children: 'Keep it up!',\n })\n }\n >\n Info\n \n\n {/* Warning with custom buttons */}\n \n void showPrefabModal<'delete'>({\n level: 'warning',\n title: 'You are about to make changes',\n children: 'Are you sure that you want to make these changes?',\n helpLink: 'https://www.example.com/help',\n buttons: [\n { title: 'Cancel', icon: 'ic_navigate_before', value: undefined },\n { title: 'Delete the world!', icon: 'ic_delete_solid', value: 'delete', level: 'error' },\n ],\n }).then((result) => {\n alert('Warning result: ' + result);\n })\n }\n >\n Warning\n \n\n {/* Warning with \"don't show again\" */}\n \n void showPrefabModal({\n level: 'warning',\n title: 'Warning',\n children: 'This message can be suppressed.',\n dontShowAgainSessionKey: 'userId_surveyId_modalId',\n buttons: [{ title: 'Dismiss', default: true }],\n })\n }\n >\n Warning + Don't show again\n \n\n {/* Error */}\n \n void showPrefabModal({\n level: 'error',\n title: 'Something is not right',\n children: 'Maybe stop doing that',\n onHelpClick: () => {},\n })\n }\n >\n Error\n \n\n {/* Success */}\n \n void showPrefabModal({\n level: 'success',\n title: 'You are a success',\n children: 'Keep succeeding!',\n onHelpClick: () => {},\n })\n }\n >\n Success\n \n\n {/* Progress — polledCloseCondition closes the modal automatically */}\n {\n let done = false;\n setTimeout(() => (done = true), 5000);\n void showPrefabModal({\n level: 'progress',\n title: 'Signing in progress',\n children: 'This modal will close in 5 seconds unless cancelled.',\n buttons: [{ title: 'Cancel', value: true }],\n polledCloseCondition: () => done,\n }).then((result) => {\n alert(result === true ? 'Cancelled' : 'Timed-out');\n });\n }}\n >\n Progress\n \n\n {/* Blocked */}\n \n void showPrefabModal({\n level: 'blocked',\n title: 'Plan Generation blocked',\n children: \"This CSD is being used by 'Joe Bloggs'. Please close Plan Generation.\",\n buttons: [{ title: 'Return to Survey Capture' }],\n })\n }\n >\n Blocked\n \n
\n );\n};\n```\n\nTo clear a \"don't show again\" session key programmatically:\n\n```tsx\nimport { LuiModalDontShowSessionRemove } from '@linzjs/windows';\n\nLuiModalDontShowSessionRemove('userId_surveyId_modalId');\n```\n\n---\n\n### Upload Modal\n\nA prefab modal for file upload interactions.\n\n\n\n**Setup** — same `LuiModalAsyncContextProvider` as above.\n\n**Invoke** — use `useLuiModalUpload`:\n\n```tsx\nimport { useLuiModalUpload } from '@linzjs/windows';\n\nexport const ModalUploadUsage = () => {\n const { modalOwnerRef, showUploadModal } = useLuiModalUpload();\n\n return (\n \n \n void showUploadModal({\n title: 'Add georeferenced image',\n content: 'Once your image has been uploaded, place markers to align the image to the spatial view.',\n width: 480,\n fileDescription: 'image',\n fileFormatText: 'Format: jpg, jpeg, png',\n acceptedExtensions: ['jpg', 'jpeg', 'png'],\n customFileErrorMessage: 'Incorrect file format!',\n }).then((file) => {\n console.log(file);\n })\n }\n >\n Upload Image...\n \n
\n );\n};\n```\n\n---\n\n### Panel\n\nDraggable, resizeable, pop-in/pop-out panel windows. Panels are opened imperatively via `OpenPanelButton` or `openPanel`.\n\n\n\n**Setup** — wrap your app with the context provider once at the root:\n\n```tsx\nimport { PanelsContextProvider } from '@linzjs/windows';\n\nexport const App = () => (\n \n ...the rest of your app...
\n \n);\n```\n\n**Define a panel component:**\n\n```tsx\nimport { Panel, PanelContent, PanelHeader } from '@linzjs/windows';\n\nexport const ShowPanelComponent = ({ data }: { data: number }) => (\n \n alert('Help!')} />\n {/* panel body content */}\n \n);\n\n// Panel as modal (disables popout, uses fixed height)\nexport const ShowPanelModalComponent = ({ data }: { data: number }) => (\n \n \n {/* panel body content */}\n \n);\n```\n\n**Open panels** — use `OpenPanelButton` or the `openPanel` function:\n\n```tsx\nimport { OpenPanelButton } from '@linzjs/windows';\n\nexport const TestShowPanel = () => (\n \n {/* uniqueId prevents duplicate panels */}\n }\n uniqueId=\"panel1\"\n />\n }\n uniqueId=\"panel2\"\n />\n } />\n {/* Panel with dynamic bounds — recalculated on resize */}\n (\n ({\n x: window.innerWidth / 3,\n y: window.innerHeight / 4,\n height: 'auto',\n width: window.innerWidth * 0.4,\n })}\n />\n )}\n />\n
\n);\n```\n\n**Panel props:**\n\n| Prop | Type | Description |\n| --------------- | --------------------------------------------- | ------------------------------------------------- |\n| `title` | `string` | Panel title bar text |\n| `size` | `{ width: number, height: number \\| 'auto' }` | Initial panel size |\n| `modal` | `boolean` | Disable dragging and popout, center on screen |\n| `resizeable` | `boolean` | Allow user resizing (default `true`) |\n| `maxHeight` | `number` | Maximum height in px |\n| `maxWidth` | `number` | Maximum width in px |\n| `minHeight` | `number` | Minimum height in px |\n| `minWidth` | `number` | Minimum width in px |\n| `dynamicBounds` | `() => { x, y, width, height }` | Callback to recalculate position/size dynamically |\n\n**Saving panel state** — pass `panelStateOptions` to `PanelsContextProvider` or `OpenPanelButton`:\n\n```tsx\n }\n panelStateOptions={{\n saveStateIn: 'localStorage',\n saveStateKey: 'userId',\n }}\n/>\n```\n\n---\n\n### Panel with Docking\n\nPanels can dock into a designated `PanelDock` area. Add `dockTo` to `PanelHeader` and place a `PanelDock` in your layout.\n\n```tsx\nimport { OpenPanelButton, Panel, PanelContent, PanelDock, PanelHeader } from '@linzjs/windows';\nimport { useState } from 'react';\n\n// Panel that can dock to the left side\nexport const DockablePanel = ({ data }: { data: number }) => (\n \n \n {/* panel body content */}\n \n);\n\nexport const TestShowPanel = () => {\n const [visible, setVisible] = useState(true);\n return (\n <>\n \n } />\n \n
\n {/* The panel docks into this area when the user clicks the dock button */}\n {visible && The Panel will dock in here}\n \n );\n};\n```\n\n---\n\n### Tabbed Panel\n\nPanels support tabs via the `@linzjs/lui` `LuiTabs` components. Wrap the `Panel` in `LuiTabs` and use `LuiTabsGroup`/`LuiTabsPanelSwitch` in the header.\n\n\n\n```tsx\nimport { LuiTabs, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch } from '@linzjs/lui';\nimport { OpenPanelButton, Panel, PanelContent, PanelHeader } from '@linzjs/windows';\n\nexport const TabbedPanelComponent = ({ data }: { data: number }) => (\n \n \n alert('Help!!!')}\n extraLeft={\n \n Africa\n Asia\n \n }\n />\n \n \n African Countries
\n \n \n Asian Countries
\n \n \n \n \n);\n\nexport const TestShowTabbedPanel = () => (\n <>\n } />\n } />\n \n);\n```\n\n---\n\n### Panel with Global Modal\n\nWhen a modal is shown from inside a panel that has been popped out into a separate window, use `showOnAllWindows: true` to ensure the modal appears in the correct window.\n\n```tsx\nimport { useLuiModalPrefab, OpenPanelButton, Panel, PanelContent, PanelHeader } from '@linzjs/windows';\n\n// showOnAllWindows ensures the modal appears even in popped-out windows\nconst PanelContents = () => {\n const { showPrefabModal } = useLuiModalPrefab();\n\n return (\n \n \n void showPrefabModal({\n showOnAllWindows: true,\n level: 'info',\n title: 'You are a fantastic person',\n children: 'Keep it up!',\n })\n }\n >\n Show modal\n \n
\n );\n};\n\nexport const TestShowPanelWithGlobalModal = () => (\n <>\n (\n \n alert('Help!!!')} />\n \n \n \n \n )}\n />\n \n);\n```\n\n---\n\n### Ribbon\n\nA toolbar ribbon with buttons, sliders, menus, and separators. Supports horizontal and vertical orientations.\n\n\n\n\n**Setup** — requires both `LuiModalAsyncContextProvider` and `PanelsContextProvider`:\n\n```tsx\nimport {\n RibbonButton,\n RibbonButtonLink,\n RibbonButtonOpenPanel,\n RibbonButtonSlider,\n RibbonContainer,\n RibbonSeparator,\n RibbonMenu,\n RibbonMenuOption,\n RibbonMenuSeparator,\n Panel,\n PanelContent,\n PanelHeader,\n} from '@linzjs/windows';\nimport { useState } from 'react';\n\nexport const TestRibbonPanel = () => {\n const [selectedItem, setSelectedItem] = useState('ic_add_rectangle');\n const [loading, setLoading] = useState(false);\n const [processing, setProcessing] = useState(false);\n\n return (\n <>\n \n \n\n {/* Horizontal ribbon */}\n \n {/* Button that opens a panel — disabled state */}\n (\n \n \n \n \n )}\n loading={loading}\n />\n\n \n\n {/* Button that opens a panel — with processing indicator */}\n (\n \n \n \n \n )}\n loading={loading}\n processing={processing}\n processingMessage={'Validating...'}\n />\n\n {/* Slider button — opens a sub-panel of options below */}\n \n \n setSelectedItem('ic_add_rectangle')}\n />\n setSelectedItem('ic_polygon_selection')}\n />\n \n \n\n {/* Slider button — dropdown menu with autoClose */}\n \n \n Circle\n \n Rectangle\n \n \n Item 3\n \n Cancel\n \n \n \n\n {/* Vertical ribbon */}\n \n (\n \n \n \n \n )}\n loading={loading}\n />\n {/* Slider opens to the right */}\n \n \n setSelectedItem('ic_add_rectangle')}\n />\n \n \n {/* External link button */}\n \n \n \n );\n};\n```\n\n**`RibbonButtonSlider` alignment options:** `'down'` | `'up'` | `'left'` | `'right'` | `'left-up'` | `'right-up'` | `'right-center'`\n","readmeFilename":"README.md"}