@codenotch/codenotch.react 1.0.81 → 2.0.0

package/README.md

@@ -2,17 +2,16 @@
 
 React bindings for [Codenotch](https://codenotch.com) applications.
 
-Codenotch is a full-stack development platform: a project combines server-side **BPMN processes**, **SQL tables** / **NoSQL documents**, **i18n** translations and **React** apps. This package is the client-side bridge between those React apps and the Codenotch runtime: it lets a component start BPMN processes, run SioQL queries, translate i18n keys, listen to real-time signals, and manage theme/language.
+Codenotch is a full-stack development platform: a project combines server-side **BPMN processes**, **SQL tables** / **NoSQL documents**, **i18n** translations and **React** apps. This package is the client-side bridge between those React apps and the Codenotch runtime: it lets a component start BPMN processes, run CNQL queries, translate i18n keys, listen to real-time signals, and manage theme/language.
 
-> **Requirements** — Codenotch apps run on **React 16** (`react@^16.14.0`). Do not use React 17/18 APIs (`createRoot`, `useId`, automatic JSX runtime…); hooks work fine.
+> **Requirements** — Codenotch apps run on **React 19** (`react@^19`, `react-dom@^19`). The package uses the automatic JSX runtime and `createRoot`; all modern React APIs (hooks, `useId`, `use`, Actions…) are available.
 
 ## Quick start
 
 ```tsx
-import React from 'react';
 import { useCodenotch } from 'codenotch-react';
 
-const MyApp: React.FC = () => {
+const MyApp = () => {
     const cn = useCodenotch();
 
     return <div className="p-4">
@@ -23,7 +22,41 @@ const MyApp: React.FC = () => {
 export default MyApp;
 ```
 
-`useCodenotch()` is **not a React hook** despite its name: it is a plain function that returns the API object bound to the current environment. It can be called anywhere — components, event handlers, plain modules.
+`useCodenotch()` is a real React hook: the returned object is stable across renders and is replaced — re-rendering the component — whenever the environment changes (`setLanguage`, `setTheme`, `init`). Regular hook rules apply. The same API is available everywhere else through two non-hook entry points:
+
+| Where | Use |
+|-------|-----|
+| Function component / custom hook | `const cn = useCodenotch();` — re-renders on language/theme change. |
+| Class component | `export default withCodenotch(MyClass);` — injects `this.props.cn`, re-renders on change, forwards `ref`. |
+| Event handler, plain module, service, anywhere | `getCodenotch()` — plain function, never stale, no re-render. |
+| Manual subscription (rare) | `onCodenotchChange(listener)` → `IDisposable`. |
+
+```tsx
+import React from 'react';
+import { withCodenotch, WithCodenotchProps } from 'codenotch-react';
+
+interface Props extends WithCodenotchProps {
+    userId: string;
+}
+
+class TodoList extends React.Component<Props> {
+    render() {
+        return <h1>{this.props.cn.i18n('todos.title')}</h1>;
+    }
+}
+
+export default withCodenotch(TodoList);   // <TodoList userId="42" /> — `cn` is injected
+```
+
+```ts
+// services/todos.ts — outside React
+import { getCodenotch } from 'codenotch-react';
+
+export async function loadTodos(userId: string) {
+    const result = await getCodenotch().startProcess('getTodos', 'start', { UserId: userId });
+    return result.output.todos;
+}
+```
 
 The environment (cluster URL, service name, language, translations…) is set up by `init(envVariables)`, which the Codenotch runtime calls automatically from the page hosting the application. You only call `init` yourself in custom hosting scenarios.
 
@@ -34,9 +67,9 @@ The environment (cluster URL, service name, language, translations…) is set up
 | `cn.env` | Readonly environment: `clusterUrl`, `serviceName`, `tenantName`, `accessToken`, `language`, `theme`, `i18n`, `appManifest`, `projectManifest`. |
 | `cn.i18n(key, ...args)` | Translate a key for the current language, filling `{0}`, `{1}`, … placeholders. |
 | `cn.startProcess(name, startNodeId, inputs)` | Start a server-side BPMN process and await its result. |
-| `cn.requestSioql(sioql, verbose?)` | Run a SioQL query (XML, SELECT-only) against the project's tables. |
+| `cn.requestCnql(cnql, verbose?)` | Run a CNQL query (XML, SELECT-only) against the project's tables. |
 | `cn.listenSignal(signalId, callback)` | Subscribe to real-time signals emitted by BPMN processes. |
-| `cn.showDialog(jsx)` | Render a JSX element in a fullscreen modal dialog. |
+| `cn.showDialog(node)` | Render a React node in a fullscreen modal dialog (own React root, unmounted on `close()`). |
 | `cn.setTheme(t)` / `cn.getTheme()` | `'light' \| 'dark'`; `setTheme` also toggles the class on `<html>` (Tailwind `dark:`). |
 | `cn.setLanguage(l)` / `cn.getLanguage()` / `cn.getLanguages()` | Current language and the languages declared in `manifest.json`. |
 | `cn.getProjectFile(path)` / `cn.getProjectFileUrl(path)` | Read/link a file of the deployed project. |
@@ -60,19 +93,19 @@ if (!result.isError) {
 }
 ```
 
-## Querying tables with SioQL
+## Querying tables with CNQL
 
-SioQL is Codenotch's XML query language over the project's SQL tables (SELECT only — writes go through BPMN processes). The root `xmlns` must be the project's `serviceName`; each queried table's `Ref` attribute names its result set:
+CNQL is Codenotch's XML query language over the project's SQL tables (SELECT only — writes go through BPMN processes). The root `xmlns` must be the project's `serviceName`; each queried table's `Ref` attribute names its result set:
 
 ```tsx
-const data = await cn.requestSioql(`
-    <SioQL xmlns="myproject" PageSize="10" PageIndex="0">
+const data = await cn.requestCnql(`
+    <CNQL xmlns="myproject" PageSize="10" PageIndex="0">
         <Users Ref="results">
             <Id />
             <Email />
             <IsAdmin Equal="true" />
         </Users>
-    </SioQL>`);
+    </CNQL>`);
 
 console.log(data.results); // [{ Id: '...', Email: '...' }, ...]
 ```
@@ -84,7 +117,8 @@ Translations come from the project's `.i18n.csv` files and are injected into `cn
 ```tsx
 cn.i18n('welcome');               // "Bienvenue"
 cn.i18n('greeting', 'Ada', 3);    // "Bonjour Ada, 3 messages"  (from "Bonjour {0}, {1} messages")
-cn.setLanguage('en');             // switch language at runtime
+cn.setLanguage('en');             // switch language at runtime — every component using
+                                  // useCodenotch() / withCodenotch() re-renders
 ```
 
 ## Real-time signals
@@ -94,12 +128,15 @@ BPMN processes can broadcast signals; subscribe from the UI with `listenSignal`:
 ```tsx
 useEffect(() => {
     let sub: IDisposable | undefined;
-    cn.listenSignal('todosChanged', (signal) => refresh(signal.data))
-        .then(s => { sub = s; });
-    return () => sub?.dispose();
+    let cancelled = false;
+    getCodenotch().listenSignal('todosChanged', (signal) => refresh(signal.data))
+        .then(s => { if (cancelled) s.dispose(); else sub = s; });
+    return () => { cancelled = true; sub?.dispose(); };
 }, []);
 ```
 
+Two details: the `cancelled` flag matters under React 19's StrictMode, which mounts / unmounts / remounts effects in development — without it the first subscription would leak when the cleanup runs before the promise resolves. And the effect uses `getCodenotch()` rather than the `cn` from `useCodenotch()`: the hook's object changes on every language/theme change, so listing it in the dependency array would re-subscribe on each change, while omitting it trips `react-hooks/exhaustive-deps`. `getCodenotch()` sidesteps both.
+
 ## Dialogs
 
 ```tsx
@@ -111,7 +148,7 @@ const dialog = cn.showDialog(
 );
 ```
 
-The dialog stays open until you call `dialog.close()`.
+The dialog stays open until you call `dialog.close()`, which unmounts the React tree and removes the `<dialog>` element. The content is rendered in its own React root, so it does not share context (providers) with the calling component.
 
 ## Type-safe processes and translation keys
 
@@ -140,6 +177,7 @@ With these in the compilation, keys, inputs and outputs are strictly checked and
 ## Notes for AI assistants
 
 - The complete typed API surface is in `dist/index.d.ts`; the readable implementation ships in `src/` (entry point `src/index.ts`).
-- `useCodenotch()` is a plain function, not a hook — no hook rules apply.
+- `useCodenotch()` is a real hook (hook rules apply; re-renders on language/theme change). In class components use `withCodenotch(Component)` and read `this.props.cn`; in event handlers, services, plain modules or effects use `getCodenotch()`. Never call `useCodenotch()` outside a function component / custom hook.
+- The object returned by `useCodenotch()` changes when the environment changes: fine in `useMemo` deps, but in `useEffect` prefer `getCodenotch()` unless the effect should re-run on language/theme change.
 - Never hand-edit a project's `typings/i18n.d.ts` / `typings/process.d.ts`: they are regenerated by the Codenotch IDE.
-- Codenotch apps are React 16 + Tailwind CSS; SioQL is SELECT-only (writes go through BPMN processes via `startProcess`).
+- Codenotch apps are React 19 + Tailwind CSS (automatic JSX runtime — no `import React` needed for JSX); CNQL is SELECT-only (writes go through BPMN processes via `startProcess`).

package/dist/components/CodeEditor.d.ts

@@ -24,7 +24,7 @@ export default class CodeEditor extends React.Component<ICodeEditorProps> {
     private isIframeReady;
     private onChangeTimeoutHandle;
     private onMessageHandler;
-    refFrame: React.RefObject<HTMLIFrameElement>;
+    refFrame: React.RefObject<HTMLIFrameElement | null>;
     constructor(props: ICodeEditorProps);
     setValue(value: string): void;
     componentDidMount(): void;

package/dist/components/CodeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../src/components/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC;AAEnC,UAAU,gBAAgB;IACtB,qFAAqF;IACrF,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;IACrE,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,qBAAqB,CAAa;IAC1C,OAAO,CAAC,gBAAgB,CAAM;IAC9B,QAAQ,qCAAwC;gBAEpC,KAAK,EAAE,gBAAgB;IAKnC,QAAQ,CAAC,KAAK,EAAE,MAAM;IAStB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAI5B,kBAAkB,CAAC,SAAS,EAAE,gBAAgB,GAAG,IAAI;IAoBrD,OAAO,CAAC,aAAa;IAgCrB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,WAAW;IA4EnB,MAAM;CAeT"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../src/components/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC;AAEnC,UAAU,gBAAgB;IACtB,qFAAqF;IACrF,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;IACrE,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,qBAAqB,CAAa;IAC1C,OAAO,CAAC,gBAAgB,CAAM;IAC9B,QAAQ,4CAAwC;gBAEpC,KAAK,EAAE,gBAAgB;IAKnC,QAAQ,CAAC,KAAK,EAAE,MAAM;IAStB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAI5B,kBAAkB,CAAC,SAAS,EAAE,gBAAgB,GAAG,IAAI;IAoBrD,OAAO,CAAC,aAAa;IAgCrB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,WAAW;IA4EnB,MAAM;CAgBT"}

package/dist/components/CodeEditor.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 /**
  * Light Monaco code editor embedded in a sandboxed iframe
@@ -92,68 +93,68 @@ class CodeEditor extends react_1.default.Component {
         if (!iframe)
             return;
         const vsBase = 'https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs';
-        const html = `<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style>
-      html, body, #container { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; }
-    </style>
-    <script>
-      (function(){
-        var vsBase = ${JSON.stringify(vsBase)};
-        // AMD loader
-        var s = document.createElement('script');
-        s.src = vsBase + '/loader.js';
-        s.onload = function(){
-          // Configure and load monaco
-          window.require.config({ paths: { vs: vsBase } });
-          window.require(['vs/editor/editor.main'], function(){
-            var editor;
-
-            function post(msg){ parent.postMessage(Object.assign({__from:'MonacoIframe'}, msg), '*'); }
-
-            function ensureEditor(){
-              if (editor) return editor;
-              editor = monaco.editor.create(document.getElementById('container'), {
-                value: '',
-                language: 'plaintext',
-                theme: 'vs',
-                automaticLayout: true,
-                minimap: { enabled: false },
-                scrollBeyondLastLine: true,
-                wordWrap: "on"
-              });
-              editor.onDidChangeModelContent(function(){
-                var v = editor.getValue();
-                post({ type: 'change', value: v });
-              });
-              return editor;
-            }
-
-            window.addEventListener('message', function(ev){
-              var data = ev.data || {}; if (data.__from !== 'MonacoIframe') return;
-              if (data.type === 'init' || data.type === 'update'){
-                var ed = ensureEditor();
-                if (typeof data.value === 'string' && ed.getValue() !== data.value){ ed.setValue(data.value); }
-                if (typeof data.language === 'string') { monaco.editor.setModelLanguage(ed.getModel(), data.language); }
-                if (typeof data.theme === 'string') { monaco.editor.setTheme(data.theme); }
-                if (typeof data.readOnly === 'boolean') { ed.updateOptions({ readOnly: data.readOnly }); }
-              }
-            });
-
-            // Signal ready after monaco is loaded
-            post({ type: 'ready' });
-          });
-        };
-        document.head.appendChild(s);
-      })();
-    </script>
-  </head>
-  <body>
-    <div id="container"></div>
-  </body>
+        const html = `<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      html, body, #container { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; }
+    </style>
+    <script>
+      (function(){
+        var vsBase = ${JSON.stringify(vsBase)};
+        // AMD loader
+        var s = document.createElement('script');
+        s.src = vsBase + '/loader.js';
+        s.onload = function(){
+          // Configure and load monaco
+          window.require.config({ paths: { vs: vsBase } });
+          window.require(['vs/editor/editor.main'], function(){
+            var editor;
+
+            function post(msg){ parent.postMessage(Object.assign({__from:'MonacoIframe'}, msg), '*'); }
+
+            function ensureEditor(){
+              if (editor) return editor;
+              editor = monaco.editor.create(document.getElementById('container'), {
+                value: '',
+                language: 'plaintext',
+                theme: 'vs',
+                automaticLayout: true,
+                minimap: { enabled: false },
+                scrollBeyondLastLine: true,
+                wordWrap: "on"
+              });
+              editor.onDidChangeModelContent(function(){
+                var v = editor.getValue();
+                post({ type: 'change', value: v });
+              });
+              return editor;
+            }
+
+            window.addEventListener('message', function(ev){
+              var data = ev.data || {}; if (data.__from !== 'MonacoIframe') return;
+              if (data.type === 'init' || data.type === 'update'){
+                var ed = ensureEditor();
+                if (typeof data.value === 'string' && ed.getValue() !== data.value){ ed.setValue(data.value); }
+                if (typeof data.language === 'string') { monaco.editor.setModelLanguage(ed.getModel(), data.language); }
+                if (typeof data.theme === 'string') { monaco.editor.setTheme(data.theme); }
+                if (typeof data.readOnly === 'boolean') { ed.updateOptions({ readOnly: data.readOnly }); }
+              }
+            });
+
+            // Signal ready after monaco is loaded
+            post({ type: 'ready' });
+          });
+        };
+        document.head.appendChild(s);
+      })();
+    </script>
+  </head>
+  <body>
+    <div id="container"></div>
+  </body>
 </html>`;
         const doc = iframe.contentWindow?.document;
         if (!doc)
@@ -163,12 +164,13 @@ class CodeEditor extends react_1.default.Component {
         doc.close();
     }
     render() {
-        let style = this.props.style || {};
+        // Never mutate props: copy the style object before applying defaults.
+        const style = { ...this.props.style };
         style.width = style.width || '100%';
         style.height = style.height || '100%';
         style.border = style.border || '0';
         style.outline = style.outline || '0';
-        return react_1.default.createElement("iframe", { style: style, title: "Codenotch", ref: this.refFrame, className: this.props.className, sandbox: "allow-scripts allow-same-origin" });
+        return (0, jsx_runtime_1.jsx)("iframe", { style: style, title: "Codenotch", ref: this.refFrame, className: this.props.className, sandbox: "allow-scripts allow-same-origin" });
     }
 }
 exports.default = CodeEditor;

package/dist/index.d.ts

@@ -1,4 +1,6 @@
-import { ICodenotchApi, ICodenotchEnv } from "./models/Codenotch";
+import { type ComponentType, type ComponentProps, type FunctionComponent, type RefAttributes } from "react";
+import { IDisposable } from "./models/Misc";
+import { ICodenotchApi, ICodenotchEnv, WithCodenotchProps } from "./models/Codenotch";
 import CodeEditor from "./components/CodeEditor";
 /**
  * The Codenotch runtime environment, populated by {@link init}.
@@ -35,26 +37,100 @@ declare const env: ICodenotchEnv;
  */
 declare function init(envVariables: any): void;
 /**
- * Return the Codenotch client API bound to the current environment.
+ * Return the Codenotch client API bound to the current environment, from
+ * anywhere: event handlers, plain modules, class components, services…
  *
- * Despite its name this is NOT a React hook — it is a plain function with no
- * hook rules attached: it can be called anywhere (components, handlers, plain
- * modules). `init()` must have been called first, which the Codenotch runtime
- * does automatically when serving the application.
+ * This is a plain function (not a hook). The returned object is never stale —
+ * its methods always read the live environment — but it does not trigger any
+ * re-render when the language or theme changes: inside React components prefer
+ * {@link useCodenotch} (function components) or {@link withCodenotch}
+ * (class components), which do.
  *
- * @returns The Codenotch API: BPMN processes, SioQL queries, i18n, signals, theme…
+ * `init()` must have been called first, which the Codenotch runtime does
+ * automatically when serving the application.
+ *
+ * @example
+ * import { getCodenotch } from 'codenotch-react';
+ *
+ * export async function loadTodos(userId: string) {
+ *     const result = await getCodenotch().startProcess('getTodos', 'start', { UserId: userId });
+ *     return result.output.todos;
+ * }
+ */
+declare function getCodenotch(): ICodenotchApi;
+/**
+ * React hook returning the Codenotch client API.
+ *
+ * The reference is stable across renders and only changes when the environment
+ * changes (`setLanguage`, `setTheme`, `init`), in which case every component
+ * using the hook re-renders — so `cn.i18n(...)` output follows the current
+ * language automatically, and the object is safe to use in `useMemo` /
+ * `useEffect` dependency arrays.
+ *
+ * Regular hook rules apply (call it unconditionally at the top of a function
+ * component or a custom hook). Outside of components — handlers defined in
+ * plain modules, services, class components — use {@link getCodenotch} or
+ * {@link withCodenotch} instead.
+ *
+ * @returns The Codenotch API: BPMN processes, CNQL queries, i18n, signals, theme…
  * @example
  * import { useCodenotch } from 'codenotch-react';
  *
- * const MyApp: React.FC = () => {
+ * const MyApp = () => {
  *     const cn = useCodenotch();
  *     return <h1>{cn.i18n('welcome')}</h1>;
  * };
  */
 declare function useCodenotch(): ICodenotchApi;
-export { env, useCodenotch, init, CodeEditor };
+/**
+ * Register a listener called each time the Codenotch environment changes
+ * (`setLanguage`, `setTheme`, `init`). Escape hatch for code that cannot use
+ * {@link useCodenotch} or {@link withCodenotch}, e.g. a class component that
+ * wants to `forceUpdate()` itself, or a non-React module caching translations.
+ *
+ * @returns A disposable — call `dispose()` to stop listening.
+ * @example
+ * componentDidMount() {
+ *     this.sub = onCodenotchChange(() => this.forceUpdate());
+ * }
+ * componentWillUnmount() {
+ *     this.sub.dispose();
+ * }
+ */
+declare function onCodenotchChange(listener: () => void): IDisposable;
+/** Props of a component wrapped by {@link withCodenotch}, without the injected `cn`. */
+type WithoutCodenotchProps<P> = Omit<P, keyof WithCodenotchProps>;
+/** Instance type of a component (class components only), used to type the forwarded `ref`. */
+type ComponentInstance<C> = C extends new (...args: any[]) => infer I ? I : never;
+/**
+ * Higher-order component injecting the Codenotch API as a `cn` prop.
+ *
+ * Meant for class components, which cannot call {@link useCodenotch}: the
+ * wrapped component receives `this.props.cn` and re-renders whenever the
+ * environment changes (language, theme…), exactly like the hook. A `ref`
+ * passed to the wrapper is forwarded to the wrapped component instance.
+ *
+ * @param Component A component whose props extend {@link WithCodenotchProps}.
+ * @returns A component with the same props minus `cn`.
+ * @example
+ * import { withCodenotch, WithCodenotchProps } from 'codenotch-react';
+ *
+ * interface Props extends WithCodenotchProps {
+ *     userId: string;
+ * }
+ *
+ * class TodoList extends React.Component<Props> {
+ *     render() {
+ *         return <h1>{this.props.cn.i18n('todos.title')}</h1>;
+ *     }
+ * }
+ *
+ * export default withCodenotch(TodoList);
+ * // <TodoList userId="42" />  — `cn` is injected
+ */
+declare function withCodenotch<C extends ComponentType<any>>(Component: C): FunctionComponent<WithoutCodenotchProps<ComponentProps<C>> & RefAttributes<ComponentInstance<C>>>;
+export { env, useCodenotch, getCodenotch, withCodenotch, onCodenotchChange, init, CodeEditor };
 export * from "./models/Codenotch";
 export * from "./models/Misc";
-export * from "./models/AppManifestModels";
 export * from "@codenotch/codenotch.core";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAoB,aAAa,EAAkB,MAAM,oBAAoB,CAAC;AAEpG,OAAO,UAAU,MAAM,yBAAyB,CAAC;AAIjD;;;GAGG;AACH,QAAA,MAAM,GAAG,EAAE,aAAkB,CAAC;AAM9B;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,IAAI,CAAC,YAAY,EAAE,GAAG,GAAG,IAAI,CAyFrC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,YAAY,IAAI,aAAa,CAsNrC;AAED,OAAO,EACH,GAAG,EACH,YAAY,EACZ,IAAI,EACJ,UAAU,EACb,CAAC;AAMF,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAkB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAKjK,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAoB,aAAa,EAAkB,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExH,OAAO,UAAU,MAAM,yBAAyB,CAAC;AAIjD;;;GAGG;AACH,QAAA,MAAM,GAAG,EAAE,aAAkB,CAAC;AA6B9B;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,IAAI,CAAC,YAAY,EAAE,GAAG,GAAG,IAAI,CA2FrC;AA2OD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,YAAY,IAAI,aAAa,CAErC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,iBAAS,YAAY,IAAI,aAAa,CAErC;AAED;;;;;;;;;;;;;;GAcG;AACH,iBAAS,iBAAiB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,WAAW,CAG5D;AAED,wFAAwF;AACxF,KAAK,qBAAqB,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC;AAElE,8FAA8F;AAC9F,KAAK,iBAAiB,CAAC,CAAC,IAAI,CAAC,SAAS,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAElF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,aAAa,CAAC,CAAC,SAAS,aAAa,CAAC,GAAG,CAAC,EAC/C,SAAS,EAAE,CAAC,GACb,iBAAiB,CAAC,qBAAqB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAQnG;AAED,OAAO,EACH,GAAG,EACH,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,IAAI,EACJ,UAAU,EACb,CAAC;AAMF,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC"}