apprun 3.36.1 → 3.37.1

package/CHANGELOG.md

@@ -1,17 +1,27 @@
 # Change Log
 
-## Releases
+## V3.37.1
+
+* Make `immer` and `property-information` as dependencies
+
+## V3.37.0
+
+* Introduced `createState` helper for simplified immutable state updates using Immer [create-state-immer](#docs/done/blog-create-state-immer.md)
+* Added `addComponents` function for adding components to routes [add-components](#docs/done/blog-addcomponents-feature.md)
+* Improved type definitions for better TypeScript support
+* Moved the component to dev-tools
+* Fixed routing basePath initialization issue
 
 ## 3.36.1
 
 * Continue code review with AI
 * Use property-information to improve property and attribute handling
-* Performance improvements in virtual DOM handling, see [analysis reports](docs/done/framework-reordering-comparison.md)
-* New hierarchical matching behavior, see [hierarchical routing requirements](docs/requirements/req-hierarchical-routing.md)
+* Performance improvements in virtual DOM handling, see [analysis reports](#docs/done/framework-reordering-comparison.md)
+* New hierarchical matching behavior, see [hierarchical routing requirements](#docs/requirements/req-hierarchical-routing.md)
 
 ## 3.36.0
 
-* Code review by using Copilot and Claude Sonnet 4, see [plan-apprun-bugfixes.md](docs/plan/plan-apprun-bugfixes.md) for details. 
+* Code review by using Copilot and Claude Sonnet 4, see [plan-apprun-bugfixes.md](#docs/plan/plan-apprun-bugfixes.md) for details. 
 * Enhanced type definitions (apprun.d.ts) for better TypeScript support
 * Fixed minor bugs and edge cases in virtual DOM handling
 * Fixed bugs in router initialization logic

package/README.md

@@ -90,19 +90,43 @@ app.start(document.body, state, view);
 ```
 <apprun-code></apprun-code>
 
-And, of course, you can use Components to encapsulate the logic blocks, e.g., SPA pages. AppRun supports routing to `/<path>`, `#<path>`, and `#/<path>` URLs with [hierarchical routing](docs/requirements/req-hierarchical-routing.md).
+
+One cool feature of AppRun is that you can use async generator functions for event handlers to return multiple values. AppRun will render each value in the order they are generated.
+
+```js
+const state = {};
+const view = state => html`
+  <div><button @click=${run(getComic)}>fetch ...</button></div>
+  ${state.loading && html`<div>loading ... </div>`}
+  ${state.comic && html`<img src=${state.comic.img} />`}
+`;
+async function* getComic() {  // async generator function returns loading flag and then the comic object
+  yield { loading: true };
+  const response = await fetch('https://xkcd-api.netlify.app');
+  const comic = await response.json();
+  yield { comic };
+}
+
+app.start(document.body, state, view);
+```
+<apprun-code></apprun-code>
+
+And, of course, you can use Components to encapsulate the logic blocks, e.g., SPA pages. Each component can have its own state, view, and update functions. Each component has its own handlers to handle the routing events. AppRun routes `/<path>`, `#<path>`, and `#/<path>` URLs to components. AppRun also does this with [hierarchical routing](docs/requirements/req-hierarchical-routing.md).
 
 ```js
 class Home extends Component {
   view = () => <div>Home</div>;
+  update = {'/, /home': state => state };
 }
 
 class Contact extends Component {
   view = () => <div>Contact</div>;
+  update = {'/contact': state => state };
 }
 
 class About extends Component {
   view = () => <div>About</div>;
+  update = {'/about': state => state };
 }
 
 const App = () => <>
@@ -114,35 +138,11 @@ const App = () => <>
 </>
 
 app.render(document.body, <App />);
-[
-  [About, '/about'],
-  [Contact, '/contact'],
-  [Home, '/, /home'],
-].map(([C, route]) => new C().start('pages', {route}));
+[About, Contact, Home].map(C => new C().start('pages'));
 ```
 <apprun-code></apprun-code>
 
 
-One cool feature of AppRun is that you can use async generator functions for event handlers to return multiple values. AppRun will render each value in the order they are generated.
-
-```js
-const state = {};
-const view = state => html`
-  <div><button @click=${run(getComic)}>fetch ...</button></div>
-  ${state.loading && html`<div>loading ... </div>`}
-  ${state.comic && html`<img src=${state.comic.img} />`}
-`;
-async function* getComic() {  // async generator function returns loading flag and then the comic object
-  yield { loading: true };
-  const response = await fetch('https://xkcd-api.netlify.app');
-  const comic = await response.json();
-  yield { comic };
-}
-
-app.start(document.body, state, view);
-```
-<apprun-code></apprun-code>
-
 Finally, you can use AppRun with [React](https://reactjs.org/). The `app.use_react` function allows you to use React for rendering the view.
 
 ```js
@@ -152,7 +152,7 @@ import app from 'apprun';
 use_react(React, ReactDOM);
 ```
 
-The `app.use_render` function allows you to use a other render library for rendering the view.
+The `app.use_render` function allows you to use a other render library for rendering the view. Enjoy the rich ecosystem of React.
 
 ```js
 import { render } from 'preact'
@@ -178,8 +178,15 @@ When you want to do a rapid prototyping or demo, you can use AppRun directly in
 <body>
 <script src="https://unpkg.com/apprun/dist/apprun-html.js"></script>
 <script>
-  const view = state => `<div>${state}</div>`;
-  app.start(document.body, 'hello AppRun', view);
+  const add = (state, delta) => state + delta;
+  const view = state => {
+    return html`<div>
+    <h1>${state}</h1>
+      <button @click=${run(add, -1)}>-1</button>
+      <button @click=${run(add, +1)}>+1</button>
+    </div>`;
+  };
+  app.start(document.body, 0, view);
 </script>
 </body>
 </html>
@@ -200,9 +207,7 @@ Or, use the ESM version:
 ```
 <apprun-code style="height:200px"></apprun-code>
 
-In addition to run directly in the browser,  or with a compiler/bundler like Webpack or Vite.
-
-You can run the `npm create apprun-app` command to create an AppRun project.
+In addition to run directly in the browser,  you can run the `npm create apprun-app` command to create an AppRun project for using a compiler/bundler like Webpack, esbuild or Vite.
 
 ```sh
 npm create apprun-app [my-app]

package/WHATSNEW.md

@@ -1,16 +1,25 @@
 ## What's New
 
+> July 22, 2025, V3.37.0
+
+- Introduced `createState` helper for simplified immutable state updates using Immer [create-state-immer](#docs/done/blog-create-state-immer.md)
+- Added `addComponents` function for adding components to routes [add-components](#docs/done/blog-addcomponents-feature.md)
+- Improved type definitions for better TypeScript support
+- Moved the component to dev-tools
+- Fixed routing basePath initialization issue
+
+
 > July 15, 2025, V3.36.1
 
 - Continue code review with AI
 - Use property-information to improve property and attribute handling
-- Performance improvements in virtual DOM handling, see [analysis reports](docs/done/framework-reordering-comparison.md)
-- New hierarchical matching behavior, see [hierarchical routing document](docs/requirements/req-hierarchical-routing.md)
+- Performance improvements in virtual DOM handling, see [analysis reports](#docs/done/framework-reordering-comparison.md)
+- New hierarchical matching behavior, see [hierarchical routing document](#docs/requirements/req-hierarchical-routing.md)
 
 
 > July 12, 2025, V3.36.0
 
-Code review by using Copilot and Claude Sonnet 4, see [plan-apprun-bugfixes.md](docs/plan/plan-apprun-bugfixes.md) for details.
+Code review by using Copilot and Claude Sonnet 4, see [plan-apprun-bugfixes.md](#docs/plan/plan-apprun-bugfixes.md) for details.
   - Enhanced type definitions (apprun.d.ts) for better TypeScript support
   - Fixed minor bugs and edge cases in virtual DOM handling
   - Fixed bugs in router initialization logic

package/apprun.d.ts

@@ -1,3 +1,40 @@
+/**
+ * AppRun TypeScript Declaration File
+ * 
+ * This file provides TypeScript declarations for the AppRun framework:
+ * 1. Core Framework Types
+ *    - Component lifecycle (View, Action, Update)
+ *    - Virtual DOM (VNode, VDOM)
+ *    - Event system with comprehensive options
+ * 
+ * 2. Application Interfaces
+ *    - IApp: Main framework interface
+ * 
+ * 3. Configuration Options
+ *    - EventOptions: Event handling configuration
+ *    - ActionOptions: Action behavior settings
+ *    - MountOptions: Component mounting configuration
+ *    - CustomElementOptions: Web component settings
+ * 
+ * 4. Integration Support
+ *    - React integration types
+ *    - Lit-html TemplateResult support
+ *    - JSX namespace declarations
+ *    - State management with createState
+ * 
+ * Updated in v3.35.1:
+ * - Consolidated types from types.ts implementation
+ * - Enhanced type safety with better generic constraints
+ * - Improved lifecycle hook typing with proper signatures
+ * - Added routing system types with ComponentRoute
+ * - Better integration with external libraries
+ * - Comprehensive options typing matching implementation
+ * - Added proper deprecation warnings
+ * - Enhanced error handling and validation
+ */
+
+import { TemplateResult } from 'lit-html';
+
 declare module 'apprun' {
 
   export type Element = HTMLElement | string;
@@ -7,96 +44,138 @@ declare module 'apprun' {
     props: {},
     children: Array<VNode | string>
   };
-  export type VDOM = false | string | VNode | Array<VNode | string> | any; // TemplateResult from lit-html
+
+  export type VDOM = false | string | VNode | Array<VNode | string> | TemplateResult;
   export type View<T> = (state: T) => VDOM | void;
   export type Action<T> = (state: T, ...p: any[]) => T | Promise<T> | void;
   export type ActionDef<T, E> = (readonly [E, Action<T>, {}?]);
   export type Update<T, E = any> = ActionDef<T, E>[] | { [name: string]: Action<T> | {}[] } | (E | Action<T> | {})[];
-  export type Route = (url: string, ...args: any[]) => any;
-  export type EventOptions<T = any> = {
+  export type Router = (url: string, ...args: any[]) => any;
+
+  export type EventOptions = {
     once?: boolean;
     transition?: boolean;
     delay?: number;
   } | any;
-  export type CustomElementOptions = {
+
+  export type ActionOptions = {
     render?: boolean;
-    shadow?: boolean;
-    history?: boolean;
-    global_event?: boolean;
-    observedAttributes?: string[];
+    history?;
+    global?: boolean;
+    callback?: (state: any) => void;
   };
 
   export type MountOptions = {
-    render?: boolean, history?, global_event?: boolean,
+    render?: boolean;
+    history?;
+    global_event?: boolean;
+    route?: string;
     transition?: boolean;
-    route?: string
   };
 
   export type AppStartOptions<T> = {
     render?: boolean;
-    transition?: boolean;
     history?;
+    transition?: boolean;
     route?: string;
     rendered?: (state: T) => void;
-    mounted?: (props: any, children: any[], state: T) => T | void;
+    mounted?: (props: any, children: any, state: T) => T;
+  };
+
+  export type CustomElementOptions = {
+    render?: boolean;
+    shadow?: boolean;
+    history?: boolean;
+    global_event?: boolean;
+    observedAttributes?: string[];
+  };
+
+  export type ComponentRoute = {
+    [route: string]: any;
   };
 
   export interface IApp {
-    start<T, E = any>(element?: Element | string, model?: T, view?: View<T>, update?: Update<T, E>,
-      options?: AppStartOptions<T>): Component<T, E>;
-    on(name: string, fn: (...args: any[]) => void, options?: any): void;
-    once(name: string, fn: (...args: any[]) => void, options?: any): void;
-    off(name: string, fn: (...args: any[]) => void): void;
+    // Event system methods
+    on(name: string, fn: (...args: any[]) => any, options?: EventOptions): void;
+    once(name: string, fn: (...args: any[]) => any, options?: EventOptions): void;
+    off(name: string, fn: (...args: any[]) => any): void;
     find(name: string): any;
     run(name: string, ...args: any[]): number;
+    runAsync(name: string, ...args: any[]): Promise<any[]>;
+
     /** @deprecated Use runAsync() instead. query() will be removed in a future version. */
-    query(name: string, ...args): Promise<any[]>;
-    runAsync(name: string, ...args): Promise<any[]>;
-    h(tag: string | Function, ...children: any[]): VNode | VNode[];
-    createElement(tag: string | Function, ...children: any[]): VNode | VNode[];
-    render(element: Element | string, node: VDOM): void;
-    Fragment(props: any[], ...children: any[]): any[];
-    route?: Route;
-    basePath?: string; // Base path for sub-directory deployments
-    webComponent(name: string, componentClass, options?: CustomElementOptions): void;
+    query(name: string, ...args: any[]): Promise<any[]>;
+
+    start<T, E = any>(element?: Element | string, model?: T, view?: View<T>, update?: Update<T, E>,
+      options?: AppStartOptions<T>): Component<T, E>;
+
+    h(tag: string | Function, props?: any, ...children: any[]): VNode | VNode[];
+    createElement(tag: string | Function, props?: any, ...children: any[]): VNode | VNode[];
+    render(element: Element | ShadowRoot, node: VNode, component?: {}): void;
+    Fragment(props: any, ...children: any[]): any[];
+
+    route: Router;
+    basePath?: string;
+    addComponents: (element: Element | string, components: ComponentRoute) => void;
+
+    webComponent(name: string, componentClass: any, options?: CustomElementOptions): void;
     safeHTML(html: string): any[];
-    use_render(render, mode?: 0 | 1);
-    use_react(React, ReactDOM);
+    use_render(render: any, mode?: 0 | 1): void;
+    use_react(React: any, ReactDOM: any): void;
     version: string;
   }
 
   export class Component<T = any, E = any> {
-    constructor(state?: T, view?: View<T>, update?: Update<T, E>);
+    constructor(state?: T, view?: View<T>, update?: Update<T, E>, options?: any);
+    readonly element: Element;
     readonly state: T;
-    setState(state: T, options?: { render?: boolean, history?: boolean }): void;
-    mount(element?: Element | string, options?: MountOptions): Component<T, E>;
-    start(element?: Element | string, options?: MountOptions): Component<T, E>;
-    on(name: E, fn: (...args: any[]) => void, options?: any): void;
-    run(name: E, ...args: any[]): number;
+    view?: View<T>;
+    update?: Update<T, E>;
+
+    // Lifecycle hooks
+    rendered?: (state: T) => void;
+    mounted?: (props: any, children: any[], state: T) => T | void;
+    unload?: (state: T) => void;
+
+    // Component lifecycle methods
+    mount(element?: Element, options?: MountOptions): Component<T, E>;
+    start(element?: Element, options?: MountOptions): Component<T, E>;
+    unmount(): void;
+
+    // State management
+    setState(state: T, options?: ActionOptions & EventOptions): void;
+
+    // Event system
+    on(event: E, fn: (...args: any[]) => void, options?: EventOptions): void;
+    run(event: E, ...args: any[]): any;
+    runAsync(event: E, ...args: any[]): Promise<any[]>;
+
     /** @deprecated Use runAsync() instead. query() will be removed in a future version. */
-    query(name: string, ...args): Promise<any[]>;
-    runAsync(name: string, ...args): Promise<any[]>;
-    rendered: (state: T) => void;
-    mounted: (props: any, children: any[], state: T) => T | void;
-    unmount: () => void;
-    unload: (state: T) => void;
+    query(event: E, ...args: any[]): Promise<any[]>;
+
+    // Action management
+    add_action(name: string, action: Action<T>, options?: ActionOptions): void;
+    is_global_event(name: string): boolean;
   }
 
   export function on<E>(name?: E, options?: EventOptions): any;
-  // obsolete
-  export function update<E>(name?: E, options?: EventOptions): any;
-  export function event<E>(name?: E, options?: EventOptions): any;
   export function customElement(name: string, options?: CustomElementOptions):
     <T extends { new(...args: any[]): {} }>(constructor: T) => T;
 
-  export const app: IApp
+  // Deprecated exports (kept for backward compatibility)
+  /** @deprecated Use on() instead */
+  export function update<E>(name?: E, options?: EventOptions): any;
+  /** @deprecated Use on() instead */
+  export function event<E>(name?: E, options?: EventOptions): any;
+
+  export const app: IApp;
   export default app;
   export const App: IApp;
 
   export const ROUTER_EVENT: string;
   export const ROUTER_404_EVENT: string;
-  export const safeHTML;
-  export function Fragment(props, ...children): [];
+  export const safeHTML: (html: string) => any[];
+  export function Fragment(props: any, ...children: any[]): any[];
 }
 
 declare namespace JSX {
@@ -107,5 +186,13 @@ declare namespace JSX {
 
 declare module 'apprun/react' {
   import { Component } from 'apprun';
-  export default function toReact(componentClass: Component): Function;
+  export default function toReact<T = any>(componentClass: Component<T>): Function;
+}
+
+declare module 'apprun/createState' {
+  type Draft<T> = T;
+  export default function createState<T = any>(
+    state: T,
+    updater: (draft: Draft<T>) => void
+  ): Promise<T> | T;
 }

package/dist/apprun-code.js

@@ -0,0 +1,2 @@
+!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.apprun=n():e.apprun=n()}(this,(()=>(()=>{"use strict";var e={320:(e,n,t)=>{t.d(n,{Fragment:()=>o.FK,createElement:()=>o.n,render:()=>o.cJ,safeHTML:()=>o.t_});var o=t(593)},593:(e,n,t)=>{t.d(n,{FK:()=>V,n:()=>Y,t_:()=>Q,cJ:()=>J});var o={};t.r(o),t.d(o,{boolean:()=>a,booleanish:()=>s,commaOrSpaceSeparated:()=>h,commaSeparated:()=>d,number:()=>c,overloadedBoolean:()=>u,spaceSeparated:()=>p});var l=t(741);class r{constructor(e,n){this.attribute=n,this.property=e}}r.prototype.attribute="",r.prototype.booleanish=!1,r.prototype.boolean=!1,r.prototype.commaOrSpaceSeparated=!1,r.prototype.commaSeparated=!1,r.prototype.defined=!1,r.prototype.mustUseProperty=!1,r.prototype.number=!1,r.prototype.overloadedBoolean=!1,r.prototype.property="",r.prototype.spaceSeparated=!1,r.prototype.space=void 0;let i=0;const a=f(),s=f(),u=f(),c=f(),p=f(),d=f(),h=f();function f(){return 2**++i}const m=Object.keys(o);class g extends r{constructor(e,n,t,l){let r=-1;if(super(e,n),y(this,"space",l),"number"==typeof t)for(;++r<m.length;){const e=m[r];y(this,m[r],(t&o[e])===o[e])}}}function y(e,n,t){t&&(e[n]=t)}function v(e){return e.toLowerCase()}g.prototype.defined=!0;const b=/[A-Z]/g,w=/-[a-z]/g,k=/^data[-\w.:]+$/i;function _(e){return"-"+e.toLowerCase()}function S(e){return e.charAt(1).toUpperCase()}class C{constructor(e,n,t){this.normal=n,this.property=e,t&&(this.space=t)}}function A(e,n){const t={},o={};for(const n of e)Object.assign(t,n.property),Object.assign(o,n.normal);return new C(t,o,n)}function x(e){const n={},t={};for(const[o,l]of Object.entries(e.properties)){const r=new g(o,e.transform(e.attributes||{},o),l,e.space);e.mustUseProperty&&e.mustUseProperty.includes(o)&&(r.mustUseProperty=!0),n[o]=r,t[v(o)]=o,t[v(r.attribute)]=o}return new C(n,t,e.space)}C.prototype.normal={},C.prototype.property={},C.prototype.space=void 0;const E=x({properties:{ariaActiveDescendant:null,ariaAtomic:s,ariaAutoComplete:null,ariaBusy:s,ariaChecked:s,ariaColCount:c,ariaColIndex:c,ariaColSpan:c,ariaControls:p,ariaCurrent:null,ariaDescribedBy:p,ariaDetails:null,ariaDisabled:s,ariaDropEffect:p,ariaErrorMessage:null,ariaExpanded:s,ariaFlowTo:p,ariaGrabbed:s,ariaHasPopup:null,ariaHidden:s,ariaInvalid:null,ariaKeyShortcuts:null,ariaLabel:null,ariaLabelledBy:p,ariaLevel:c,ariaLive:null,ariaModal:s,ariaMultiLine:s,ariaMultiSelectable:s,ariaOrientation:null,ariaOwns:p,ariaPlaceholder:null,ariaPosInSet:c,ariaPressed:s,ariaReadOnly:s,ariaRelevant:null,ariaRequired:s,ariaRoleDescription:p,ariaRowCount:c,ariaRowIndex:c,ariaRowSpan:c,ariaSelected:s,ariaSetSize:c,ariaSort:null,ariaValueMax:c,ariaValueMin:c,ariaValueNow:c,ariaValueText:null,role:null},transform:(e,n)=>"role"===n?n:"aria-"+n.slice(4).toLowerCase()});function P(e,n){return n in e?e[n]:n}function O(e,n){return P(e,n.toLowerCase())}const M=x({attributes:{acceptcharset:"accept-charset",classname:"class",htmlfor:"for",httpequiv:"http-equiv"},mustUseProperty:["checked","multiple","muted","selected"],properties:{abbr:null,accept:d,acceptCharset:p,accessKey:p,action:null,allow:null,allowFullScreen:a,allowPaymentRequest:a,allowUserMedia:a,alt:null,as:null,async:a,autoCapitalize:null,autoComplete:p,autoFocus:a,autoPlay:a,blocking:p,capture:null,charSet:null,checked:a,cite:null,className:p,cols:c,colSpan:null,content:null,contentEditable:s,controls:a,controlsList:p,coords:c|d,crossOrigin:null,data:null,dateTime:null,decoding:null,default:a,defer:a,dir:null,dirName:null,disabled:a,download:u,draggable:s,encType:null,enterKeyHint:null,fetchPriority:null,form:null,formAction:null,formEncType:null,formMethod:null,formNoValidate:a,formTarget:null,headers:p,height:c,hidden:u,high:c,href:null,hrefLang:null,htmlFor:p,httpEquiv:p,id:null,imageSizes:null,imageSrcSet:null,inert:a,inputMode:null,integrity:null,is:null,isMap:a,itemId:null,itemProp:p,itemRef:p,itemScope:a,itemType:p,kind:null,label:null,lang:null,language:null,list:null,loading:null,loop:a,low:c,manifest:null,max:null,maxLength:c,media:null,method:null,min:null,minLength:c,multiple:a,muted:a,name:null,nonce:null,noModule:a,noValidate:a,onAbort:null,onAfterPrint:null,onAuxClick:null,onBeforeMatch:null,onBeforePrint:null,onBeforeToggle:null,onBeforeUnload:null,onBlur:null,onCancel:null,onCanPlay:null,onCanPlayThrough:null,onChange:null,onClick:null,onClose:null,onContextLost:null,onContextMenu:null,onContextRestored:null,onCopy:null,onCueChange:null,onCut:null,onDblClick:null,onDrag:null,onDragEnd:null,onDragEnter:null,onDragExit:null,onDragLeave:null,onDragOver:null,onDragStart:null,onDrop:null,onDurationChange:null,onEmptied:null,onEnded:null,onError:null,onFocus:null,onFormData:null,onHashChange:null,onInput:null,onInvalid:null,onKeyDown:null,onKeyPress:null,onKeyUp:null,onLanguageChange:null,onLoad:null,onLoadedData:null,onLoadedMetadata:null,onLoadEnd:null,onLoadStart:null,onMessage:null,onMessageError:null,onMouseDown:null,onMouseEnter:null,onMouseLeave:null,onMouseMove:null,onMouseOut:null,onMouseOver:null,onMouseUp:null,onOffline:null,onOnline:null,onPageHide:null,onPageShow:null,onPaste:null,onPause:null,onPlay:null,onPlaying:null,onPopState:null,onProgress:null,onRateChange:null,onRejectionHandled:null,onReset:null,onResize:null,onScroll:null,onScrollEnd:null,onSecurityPolicyViolation:null,onSeeked:null,onSeeking:null,onSelect:null,onSlotChange:null,onStalled:null,onStorage:null,onSubmit:null,onSuspend:null,onTimeUpdate:null,onToggle:null,onUnhandledRejection:null,onUnload:null,onVolumeChange:null,onWaiting:null,onWheel:null,open:a,optimum:c,pattern:null,ping:p,placeholder:null,playsInline:a,popover:null,popoverTarget:null,popoverTargetAction:null,poster:null,preload:null,readOnly:a,referrerPolicy:null,rel:p,required:a,reversed:a,rows:c,rowSpan:c,sandbox:p,scope:null,scoped:a,seamless:a,selected:a,shadowRootClonable:a,shadowRootDelegatesFocus:a,shadowRootMode:null,shape:null,size:c,sizes:null,slot:null,span:c,spellCheck:s,src:null,srcDoc:null,srcLang:null,srcSet:null,start:c,step:null,style:null,tabIndex:c,target:null,title:null,translate:null,type:null,typeMustMatch:a,useMap:null,value:s,width:c,wrap:null,writingSuggestions:null,align:null,aLink:null,archive:p,axis:null,background:null,bgColor:null,border:c,borderColor:null,bottomMargin:c,cellPadding:null,cellSpacing:null,char:null,charOff:null,classId:null,clear:null,code:null,codeBase:null,codeType:null,color:null,compact:a,declare:a,event:null,face:null,frame:null,frameBorder:null,hSpace:c,leftMargin:c,link:null,longDesc:null,lowSrc:null,marginHeight:c,marginWidth:c,noResize:a,noHref:a,noShade:a,noWrap:a,object:null,profile:null,prompt:null,rev:null,rightMargin:c,rules:null,scheme:null,scrolling:s,standby:null,summary:null,text:null,topMargin:c,valueType:null,version:null,vAlign:null,vLink:null,vSpace:c,allowTransparency:null,autoCorrect:null,autoSave:null,disablePictureInPicture:a,disableRemotePlayback:a,prefix:null,property:null,results:c,security:null,unselectable:null},space:"html",transform:O}),L=x({attributes:{accentHeight:"accent-height",alignmentBaseline:"alignment-baseline",arabicForm:"arabic-form",baselineShift:"baseline-shift",capHeight:"cap-height",className:"class",clipPath:"clip-path",clipRule:"clip-rule",colorInterpolation:"color-interpolation",colorInterpolationFilters:"color-interpolation-filters",colorProfile:"color-profile",colorRendering:"color-rendering",crossOrigin:"crossorigin",dataType:"datatype",dominantBaseline:"dominant-baseline",enableBackground:"enable-background",fillOpacity:"fill-opacity",fillRule:"fill-rule",floodColor:"flood-color",floodOpacity:"flood-opacity",fontFamily:"font-family",fontSize:"font-size",fontSizeAdjust:"font-size-adjust",fontStretch:"font-stretch",fontStyle:"font-style",fontVariant:"font-variant",fontWeight:"font-weight",glyphName:"glyph-name",glyphOrientationHorizontal:"glyph-orientation-horizontal",glyphOrientationVertical:"glyph-orientation-vertical",hrefLang:"hreflang",horizAdvX:"horiz-adv-x",horizOriginX:"horiz-origin-x",horizOriginY:"horiz-origin-y",imageRendering:"image-rendering",letterSpacing:"letter-spacing",lightingColor:"lighting-color",markerEnd:"marker-end",markerMid:"marker-mid",markerStart:"marker-start",navDown:"nav-down",navDownLeft:"nav-down-left",navDownRight:"nav-down-right",navLeft:"nav-left",navNext:"nav-next",navPrev:"nav-prev",navRight:"nav-right",navUp:"nav-up",navUpLeft:"nav-up-left",navUpRight:"nav-up-right",onAbort:"onabort",onActivate:"onactivate",onAfterPrint:"onafterprint",onBeforePrint:"onbeforeprint",onBegin:"onbegin",onCancel:"oncancel",onCanPlay:"oncanplay",onCanPlayThrough:"oncanplaythrough",onChange:"onchange",onClick:"onclick",onClose:"onclose",onCopy:"oncopy",onCueChange:"oncuechange",onCut:"oncut",onDblClick:"ondblclick",onDrag:"ondrag",onDragEnd:"ondragend",onDragEnter:"ondragenter",onDragExit:"ondragexit",onDragLeave:"ondragleave",onDragOver:"ondragover",onDragStart:"ondragstart",onDrop:"ondrop",onDurationChange:"ondurationchange",onEmptied:"onemptied",onEnd:"onend",onEnded:"onended",onError:"onerror",onFocus:"onfocus",onFocusIn:"onfocusin",onFocusOut:"onfocusout",onHashChange:"onhashchange",onInput:"oninput",onInvalid:"oninvalid",onKeyDown:"onkeydown",onKeyPress:"onkeypress",onKeyUp:"onkeyup",onLoad:"onload",onLoadedData:"onloadeddata",onLoadedMetadata:"onloadedmetadata",onLoadStart:"onloadstart",onMessage:"onmessage",onMouseDown:"onmousedown",onMouseEnter:"onmouseenter",onMouseLeave:"onmouseleave",onMouseMove:"onmousemove",onMouseOut:"onmouseout",onMouseOver:"onmouseover",onMouseUp:"onmouseup",onMouseWheel:"onmousewheel",onOffline:"onoffline",onOnline:"ononline",onPageHide:"onpagehide",onPageShow:"onpageshow",onPaste:"onpaste",onPause:"onpause",onPlay:"onplay",onPlaying:"onplaying",onPopState:"onpopstate",onProgress:"onprogress",onRateChange:"onratechange",onRepeat:"onrepeat",onReset:"onreset",onResize:"onresize",onScroll:"onscroll",onSeeked:"onseeked",onSeeking:"onseeking",onSelect:"onselect",onShow:"onshow",onStalled:"onstalled",onStorage:"onstorage",onSubmit:"onsubmit",onSuspend:"onsuspend",onTimeUpdate:"ontimeupdate",onToggle:"ontoggle",onUnload:"onunload",onVolumeChange:"onvolumechange",onWaiting:"onwaiting",onZoom:"onzoom",overlinePosition:"overline-position",overlineThickness:"overline-thickness",paintOrder:"paint-order",panose1:"panose-1",pointerEvents:"pointer-events",referrerPolicy:"referrerpolicy",renderingIntent:"rendering-intent",shapeRendering:"shape-rendering",stopColor:"stop-color",stopOpacity:"stop-opacity",strikethroughPosition:"strikethrough-position",strikethroughThickness:"strikethrough-thickness",strokeDashArray:"stroke-dasharray",strokeDashOffset:"stroke-dashoffset",strokeLineCap:"stroke-linecap",strokeLineJoin:"stroke-linejoin",strokeMiterLimit:"stroke-miterlimit",strokeOpacity:"stroke-opacity",strokeWidth:"stroke-width",tabIndex:"tabindex",textAnchor:"text-anchor",textDecoration:"text-decoration",textRendering:"text-rendering",transformOrigin:"transform-origin",typeOf:"typeof",underlinePosition:"underline-position",underlineThickness:"underline-thickness",unicodeBidi:"unicode-bidi",unicodeRange:"unicode-range",unitsPerEm:"units-per-em",vAlphabetic:"v-alphabetic",vHanging:"v-hanging",vIdeographic:"v-ideographic",vMathematical:"v-mathematical",vectorEffect:"vector-effect",vertAdvY:"vert-adv-y",vertOriginX:"vert-origin-x",vertOriginY:"vert-origin-y",wordSpacing:"word-spacing",writingMode:"writing-mode",xHeight:"x-height",playbackOrder:"playbackorder",timelineBegin:"timelinebegin"},properties:{about:h,accentHeight:c,accumulate:null,additive:null,alignmentBaseline:null,alphabetic:c,amplitude:c,arabicForm:null,ascent:c,attributeName:null,attributeType:null,azimuth:c,bandwidth:null,baselineShift:null,baseFrequency:null,baseProfile:null,bbox:null,begin:null,bias:c,by:null,calcMode:null,capHeight:c,className:p,clip:null,clipPath:null,clipPathUnits:null,clipRule:null,color:null,colorInterpolation:null,colorInterpolationFilters:null,colorProfile:null,colorRendering:null,content:null,contentScriptType:null,contentStyleType:null,crossOrigin:null,cursor:null,cx:null,cy:null,d:null,dataType:null,defaultAction:null,descent:c,diffuseConstant:c,direction:null,display:null,dur:null,divisor:c,dominantBaseline:null,download:a,dx:null,dy:null,edgeMode:null,editable:null,elevation:c,enableBackground:null,end:null,event:null,exponent:c,externalResourcesRequired:null,fill:null,fillOpacity:c,fillRule:null,filter:null,filterRes:null,filterUnits:null,floodColor:null,floodOpacity:null,focusable:null,focusHighlight:null,fontFamily:null,fontSize:null,fontSizeAdjust:null,fontStretch:null,fontStyle:null,fontVariant:null,fontWeight:null,format:null,fr:null,from:null,fx:null,fy:null,g1:d,g2:d,glyphName:d,glyphOrientationHorizontal:null,glyphOrientationVertical:null,glyphRef:null,gradientTransform:null,gradientUnits:null,handler:null,hanging:c,hatchContentUnits:null,hatchUnits:null,height:null,href:null,hrefLang:null,horizAdvX:c,horizOriginX:c,horizOriginY:c,id:null,ideographic:c,imageRendering:null,initialVisibility:null,in:null,in2:null,intercept:c,k:c,k1:c,k2:c,k3:c,k4:c,kernelMatrix:h,kernelUnitLength:null,keyPoints:null,keySplines:null,keyTimes:null,kerning:null,lang:null,lengthAdjust:null,letterSpacing:null,lightingColor:null,limitingConeAngle:c,local:null,markerEnd:null,markerMid:null,markerStart:null,markerHeight:null,markerUnits:null,markerWidth:null,mask:null,maskContentUnits:null,maskUnits:null,mathematical:null,max:null,media:null,mediaCharacterEncoding:null,mediaContentEncodings:null,mediaSize:c,mediaTime:null,method:null,min:null,mode:null,name:null,navDown:null,navDownLeft:null,navDownRight:null,navLeft:null,navNext:null,navPrev:null,navRight:null,navUp:null,navUpLeft:null,navUpRight:null,numOctaves:null,observer:null,offset:null,onAbort:null,onActivate:null,onAfterPrint:null,onBeforePrint:null,onBegin:null,onCancel:null,onCanPlay:null,onCanPlayThrough:null,onChange:null,onClick:null,onClose:null,onCopy:null,onCueChange:null,onCut:null,onDblClick:null,onDrag:null,onDragEnd:null,onDragEnter:null,onDragExit:null,onDragLeave:null,onDragOver:null,onDragStart:null,onDrop:null,onDurationChange:null,onEmptied:null,onEnd:null,onEnded:null,onError:null,onFocus:null,onFocusIn:null,onFocusOut:null,onHashChange:null,onInput:null,onInvalid:null,onKeyDown:null,onKeyPress:null,onKeyUp:null,onLoad:null,onLoadedData:null,onLoadedMetadata:null,onLoadStart:null,onMessage:null,onMouseDown:null,onMouseEnter:null,onMouseLeave:null,onMouseMove:null,onMouseOut:null,onMouseOver:null,onMouseUp:null,onMouseWheel:null,onOffline:null,onOnline:null,onPageHide:null,onPageShow:null,onPaste:null,onPause:null,onPlay:null,onPlaying:null,onPopState:null,onProgress:null,onRateChange:null,onRepeat:null,onReset:null,onResize:null,onScroll:null,onSeeked:null,onSeeking:null,onSelect:null,onShow:null,onStalled:null,onStorage:null,onSubmit:null,onSuspend:null,onTimeUpdate:null,onToggle:null,onUnload:null,onVolumeChange:null,onWaiting:null,onZoom:null,opacity:null,operator:null,order:null,orient:null,orientation:null,origin:null,overflow:null,overlay:null,overlinePosition:c,overlineThickness:c,paintOrder:null,panose1:null,path:null,pathLength:c,patternContentUnits:null,patternTransform:null,patternUnits:null,phase:null,ping:p,pitch:null,playbackOrder:null,pointerEvents:null,points:null,pointsAtX:c,pointsAtY:c,pointsAtZ:c,preserveAlpha:null,preserveAspectRatio:null,primitiveUnits:null,propagate:null,property:h,r:null,radius:null,referrerPolicy:null,refX:null,refY:null,rel:h,rev:h,renderingIntent:null,repeatCount:null,repeatDur:null,requiredExtensions:h,requiredFeatures:h,requiredFonts:h,requiredFormats:h,resource:null,restart:null,result:null,rotate:null,rx:null,ry:null,scale:null,seed:null,shapeRendering:null,side:null,slope:null,snapshotTime:null,specularConstant:c,specularExponent:c,spreadMethod:null,spacing:null,startOffset:null,stdDeviation:null,stemh:null,stemv:null,stitchTiles:null,stopColor:null,stopOpacity:null,strikethroughPosition:c,strikethroughThickness:c,string:null,stroke:null,strokeDashArray:h,strokeDashOffset:null,strokeLineCap:null,strokeLineJoin:null,strokeMiterLimit:c,strokeOpacity:c,strokeWidth:null,style:null,surfaceScale:c,syncBehavior:null,syncBehaviorDefault:null,syncMaster:null,syncTolerance:null,syncToleranceDefault:null,systemLanguage:h,tabIndex:c,tableValues:null,target:null,targetX:c,targetY:c,textAnchor:null,textDecoration:null,textRendering:null,textLength:null,timelineBegin:null,title:null,transformBehavior:null,type:null,typeOf:h,to:null,transform:null,transformOrigin:null,u1:null,u2:null,underlinePosition:c,underlineThickness:c,unicode:null,unicodeBidi:null,unicodeRange:null,unitsPerEm:c,values:null,vAlphabetic:c,vMathematical:c,vectorEffect:null,vHanging:c,vIdeographic:c,version:null,vertAdvY:c,vertOriginX:c,vertOriginY:c,viewBox:null,viewTarget:null,visibility:null,width:null,widths:null,wordSpacing:null,writingMode:null,x:null,x1:null,x2:null,xChannelSelector:null,xHeight:c,y:null,y1:null,y2:null,yChannelSelector:null,z:null,zoomAndPan:null},space:"svg",transform:P}),T=x({properties:{xLinkActuate:null,xLinkArcRole:null,xLinkHref:null,xLinkRole:null,xLinkShow:null,xLinkTitle:null,xLinkType:null},space:"xlink",transform:(e,n)=>"xlink:"+n.slice(5).toLowerCase()}),R=x({attributes:{xmlnsxlink:"xmlns:xlink"},properties:{xmlnsXLink:null,xmlns:null},space:"xmlns",transform:O}),D=x({properties:{xmlBase:null,xmlLang:null,xmlSpace:null},space:"xml",transform:(e,n)=>"xml:"+n.slice(3).toLowerCase()}),j=A([E,M,T,R,D],"html"),U=A([E,L,T,R,D],"svg"),B="_props",N=new Map;function F(e,n,t){!function(e){return null!=e&&!1!==e&&""!==e&&(!0===e||("string"==typeof e?"false"!==e.toLowerCase()&&"0"!==e:Boolean(e)))}(t)?e.removeAttribute(n):e.setAttribute(n,n)}function I(e,n,t){try{e[n]=t}catch(o){W(e,n,t,!1)}}function W(e,n,t,o){if(null==t)return void e.removeAttribute(n);const l=String(t);if(o&&n.includes(":")){const[t]=n.split(":");"xlink"===t?e.setAttributeNS("http://www.w3.org/1999/xlink",n,l):e.setAttribute(n,l)}else e.setAttribute(n,l)}function H(e,n,t,o){if(l=e,i=n,document.activeElement===l?["value","selectionStart","selectionEnd","selectionDirection"].includes(i):"scrollTop"===i||"scrollLeft"===i||l instanceof HTMLMediaElement&&["currentTime","paused","playbackRate","volume"].includes(i))return;var l,i;if("style"===n){if(e.style.cssText&&(e.style.cssText=""),"string"==typeof t)e.style.cssText=t;else if(t&&"object"==typeof t)for(const n in t)e.style[n]!==t[n]&&(e.style[n]=t[n]);return}if("key"===n)return void(null!=t&&(e.key=t));if(n.startsWith("data-"))return void function(e,n,t){const o=(l=n.slice(5)).length<=1?l.toLowerCase():l.split("-").map(((e,n)=>0===n?e.toLowerCase():e.charAt(0).toUpperCase()+e.slice(1).toLowerCase())).join("");var l;null==t?delete e.dataset[o]:e.dataset[o]=String(t)}(e,n,t);if(n.startsWith("on"))return void function(e,n,t){n.startsWith("on")&&(t&&"function"!=typeof t?"string"==typeof t&&(t?e.setAttribute(n,t):e.removeAttribute(n)):e[n]=t)}(e,n,t);if(!("INPUT"!==e.tagName&&"TEXTAREA"!==e.tagName&&"SELECT"!==e.tagName||"value"!==n&&"selected"!==n&&"selectedIndex"!==n))return void I(e,n,t);if("INPUT"===e.tagName&&"checked"===n)return I(e,n,t),void F(e,n,t);const a=function(e,n){const t=`${e}:${n}`;let o=N.get(t);return void 0===o&&(o=function(e,n){const t=v(n);let o=n,l=r;if(t in e.normal)return e.property[e.normal[t]];if(t.length>4&&"data"===t.slice(0,4)&&k.test(n)){if("-"===n.charAt(4)){const e=n.slice(5).replace(w,S);o="data"+e.charAt(0).toUpperCase()+e.slice(1)}else{const e=n.slice(4);if(!w.test(e)){let t=e.replace(b,_);"-"!==t.charAt(0)&&(t="-"+t),n="data"+t}}l=g}return new l(o,n)}(n?U:j,e)||null,N.set(t,o)),o}(n,o);a?a.boolean||a.overloadedBoolean?F(e,a.attribute,t):a.mustUseProperty&&!o?I(e,a.property,t):W(e,a.attribute,t,o):n.startsWith("aria-")||"role"===n?W(e,n,t,o):n in e||void 0!==e[n]?I(e,n,t):W(e,n,t,o)}function z(e){return/^[a-zA-Z_:][\w\-:.]*$/.test(e)&&!e.includes("<")&&!e.includes(">")&&!e.includes('"')&&!e.includes("'")}function $(e,n,t){const o=function(e,n){if(n&&(n.class=n.class||n.className,delete n.className),!e||0===Object.keys(e).length)return n||{};if(!n||0===Object.keys(n).length){const n={};return Object.keys(e).forEach((e=>n[e]=null)),n}const t={};return Object.keys(e).forEach((e=>{e in n||(t[e]=null)})),Object.keys(n).forEach((e=>t[e]=n[e])),t}(e[B]||{},n);e[B]=n||{},function(e,n,t,o){for(const t in n)z(t)&&H(e,t,n[t],o);n&&"function"==typeof n.ref&&window.requestAnimationFrame((()=>n.ref(e)))}(e,o,0,t)}function V(e,...n){return q(n)}function q(e){const n=[],t=e=>{null!=e&&""!==e&&!1!==e&&n.push("function"==typeof e||"object"==typeof e?e:`${e}`)};return e&&e.forEach((e=>{Array.isArray(e)?e.forEach((e=>t(e))):t(e)})),n}const K={};let X=0;function Y(e,n,...t){const o=q(t);if("string"==typeof e)return{tag:e,props:n,children:o};if(Array.isArray(e))return e;if(void 0===e&&t)return o;if(Object.getPrototypeOf(e).__isAppRunComponent)return{tag:e,props:n,children:o};if("function"==typeof e)return e(n,o);throw new Error(`Unknown tag in vdom ${e}`)}const J=(e,n,t={})=>{null!=n&&!1!==n&&function(e,n,t={}){if(null==n||!1===n)return;if(n=te(n,t),!e)return;const o="SVG"===e.nodeName;Array.isArray(n)?G(e,n,o):G(e,[n],o)}("string"==typeof e&&e?document.getElementById(e)||document.querySelector(e):e,n=(0,l.A)(n,t),t)};function Z(e,n,t){t=t||"svg"===n.tag,function(e,n){const t=e.nodeName,o=`${n.tag||""}`;return t.toUpperCase()===o.toUpperCase()}(e,n)?(G(e,n.children,t),$(e,n.props,t)):e.parentNode.replaceChild(ne(n,t),e)}function G(e,n,t){const o=e.childNodes?.length||0,l=n?.length||0,r=Math.min(o,l);for(let o=0;o<r;o++){const l=n[o],r=e.childNodes[o];if("string"==typeof l)r.textContent!==l&&(3===r.nodeType?r.nodeValue=l:e.replaceChild(ee(l),r));else if(l instanceof HTMLElement||l instanceof SVGElement)e.insertBefore(l,r);else{const n=l.props&&l.props.key;if(n)if(r.key===n)Z(e.childNodes[o],l,t);else{const i=K[n];i?(e.insertBefore(i,r),Z(e.childNodes[o],l,t)):e.replaceChild(ne(l,t),r)}else Z(e.childNodes[o],l,t)}}let i=e.childNodes?.length||0;for(;i>r;)e.removeChild(e.lastChild),i--;if(l>r){const o=document.createDocumentFragment();for(let e=r;e<n.length;e++)o.appendChild(ne(n[e],t));e.appendChild(o)}}const Q=e=>{const n=document.createElement("section");return n.insertAdjacentHTML("afterbegin",e),Array.from(n.children)};function ee(e){if(0===e?.indexOf("_html:")){const n=document.createElement("div");return n.insertAdjacentHTML("afterbegin",e.substring(6)),n}return document.createTextNode(e??"")}function ne(e,n){if(e instanceof HTMLElement||e instanceof SVGElement)return e;if("string"==typeof e)return ee(e);if(!e.tag||"function"==typeof e.tag)return ee(JSON.stringify(e));const t=(n=n||"svg"===e.tag)?document.createElementNS("http://www.w3.org/2000/svg",e.tag):document.createElement(e.tag);return $(t,e.props,n),e.children&&e.children.forEach((e=>t.appendChild(ne(e,n)))),e.props&&void 0!==e.props.key&&(t.key=e.props.key,K[e.props.key]=t,++X>=500&&(function(){if(!(Object.keys(K).length<=1e3))for(const[e,n]of Object.entries(K))n.isConnected||delete K[e]}(),X=0)),t}function te(e,n,t=0){if("string"==typeof e)return e;if(Array.isArray(e))return e.map((e=>te(e,n,t++)));let o=e;if(e&&"function"==typeof e.tag&&Object.getPrototypeOf(e.tag).__isAppRunComponent&&(o=function(e,n,t){const{tag:o,props:l,children:r}=e;let i=`_${t}`,a=l&&l.id;a?i=a:a=`_${t}${Date.now()}`;let s="section";l&&l.as&&(s=l.as,delete l.as),n.__componentCache||(n.__componentCache={});let u=n.__componentCache[i];if(u&&u instanceof o&&u.element)u.renderState(u.state);else{const e=document.createElement(s);u=n.__componentCache[i]=new o({...l,children:r}).mount(e,{render:!0})}if(u.mounted){const e=u.mounted(l,r,u.state);void 0!==e&&u.setState(e)}return $(u.element,l,!1),u.element}(e,n,t)),o&&Array.isArray(o.children)){const e=o.props?._component;if(e){let n=0;o.children=o.children.map((t=>te(t,e,n++)))}else o.children=o.children.map((e=>te(e,n,t++)))}return o}},634:(e,n,t)=>{function o(e){return e?.target instanceof HTMLElement?e.target:null}function l(e,n=document){try{return n.querySelector(e)}catch(n){return console.warn(`Invalid selector: ${e}`,n),null}}function r(e){try{return document.getElementById(e)}catch(n){return console.warn(`Error getting element by id: ${e}`,n),null}}t.d(n,{PB:()=>o,bV:()=>l,oP:()=>r})},672:(e,n,t)=>{t.d(n,{C:()=>l,a:()=>o});const o="3.37.1",l=`AppRun-${o}`},741:(e,n,t)=>{t.d(n,{A:()=>s});var o=t(859),l=t(634);const r=(e,n)=>(n?e.state[n]:e.state)||"",i=(e,n,t)=>{if(n){const o=e.state||{};o[n]=t,e.setState(o)}else e.setState(t)},a=(e,n)=>{if(Array.isArray(e))return e.map((e=>a(e,n)));{let{type:t,tag:s,props:u,children:c}=e;return s=s||t,c=c||u?.children,u&&Object.keys(u).forEach((e=>{e.startsWith("$")&&(((e,n,t,a)=>{if(e.startsWith("$on")){const t=n[e];if(e=e.substring(1),"boolean"==typeof t)n[e]=n=>a.run?a.run(e,n):o.A.run(e,n);else if("string"==typeof t)n[e]=e=>a.run?a.run(t,e):o.A.run(t,e);else if("function"==typeof t)n[e]=e=>a.setState(t(a.state,e));else if(Array.isArray(t)){const[l,...r]=t;"string"==typeof l?n[e]=e=>a.run?a.run(l,...r,e):o.A.run(l,...r,e):"function"==typeof l&&(n[e]=e=>a.setState(l(a.state,...r,e)))}}else if("$bind"===e){const o=n.type||"text",s="string"==typeof n[e]?n[e]:n.name;if("input"===t)switch(o){case"checkbox":n.checked=r(a,s),n.onclick=e=>{const n=(0,l.PB)(e);n&&i(a,s||n.name,n.checked)};break;case"radio":n.checked=r(a,s)===n.value,n.onclick=e=>{const n=(0,l.PB)(e);n&&i(a,s||n.name,n.value)};break;case"number":case"range":n.value=r(a,s),n.oninput=e=>{const n=(0,l.PB)(e);n&&i(a,s||n.name,Number(n.value))};break;default:n.value=r(a,s),n.oninput=e=>{const n=(0,l.PB)(e);n&&i(a,s||n.name,n.value)}}else"select"===t?(n.value=r(a,s),n.onchange=e=>{const n=(0,l.PB)(e);n&&!n.multiple&&i(a,s||n.name,n.value)}):"option"===t?(n.selected=r(a,s),n.onclick=e=>{const n=(0,l.PB)(e);n&&i(a,s||n.name,n.selected)}):"textarea"===t&&(n.innerHTML=r(a,s),n.oninput=e=>{const n=(0,l.PB)(e);n&&i(a,s||n.name,n.value)})}else o.A.run("$",{key:e,tag:t,props:n,component:a})})(e,u,s,n),delete u[e])})),c&&a(c,n),e}},s=a},859:(e,n,t)=>{t.d(n,{A:()=>s,q:()=>l});var o=t(672);class l{constructor(){this._events={}}on(e,n,t={}){this._events[e]=this._events[e]||[],this._events[e].push({fn:n,options:t})}off(e,n){const t=this._events[e]||[];this._events[e]=t.filter((e=>e.fn!==n))}find(e){return this._events[e]}run(e,...n){const t=this.getSubscribers(e,this._events);return console.assert(t&&t.length>0,"No subscriber for event: "+e),t.forEach((t=>{const{fn:o,options:l}=t;if(!o||"function"!=typeof o)return console.error(`AppRun event handler for '${e}' is not a function:`,o),!1;if(l.delay)this.delay(e,o,n,l);else try{Object.keys(l).length>0?o.apply(this,[...n,l]):o.apply(this,n)}catch(n){console.error(`Error in event handler for '${e}':`,n)}return!t.options.once})),t.length}once(e,n,t={}){this.on(e,n,{...t,once:!0})}delay(e,n,t,o){o._t&&clearTimeout(o._t),o._t=setTimeout((()=>{clearTimeout(o._t);try{Object.keys(o).length>0?n.apply(this,[...t,o]):n.apply(this,t)}catch(n){console.error(`Error in delayed event handler for '${e}':`,n)}}),o.delay)}runAsync(e,...n){const t=this.getSubscribers(e,this._events);console.assert(t&&t.length>0,"No subscriber for event: "+e);const o=t.map((t=>{const{fn:o,options:l}=t;if(!o||"function"!=typeof o)return console.error(`AppRun async event handler for '${e}' is not a function:`,o),Promise.resolve(null);try{return Object.keys(l).length>0?o.apply(this,[...n,l]):o.apply(this,n)}catch(n){return console.error(`Error in async event handler for '${e}':`,n),Promise.reject(n)}}));return Promise.all(o)}query(e,...n){return console.warn("app.query() is deprecated. Use app.runAsync() instead."),this.runAsync(e,...n)}getSubscribers(e,n){const t=n[e]||[];return n[e]=t.filter((e=>!e.options.once)),Object.keys(n).filter((n=>n.endsWith("*")&&e.startsWith(n.replace("*","")))).sort(((e,n)=>n.length-e.length)).forEach((o=>t.push(...n[o].map((n=>({...n,options:{...n.options,event:e}})))))),t}}const r=o.C;let i;const a="undefined"!=typeof window?window:void 0!==t.g?t.g:"undefined"!=typeof self?self:{};a.app&&a._AppRunVersions?i=a.app:(i=new l,a.app=i,a._AppRunVersions=r);const s=i},971:(e,n,t)=>{t.d(n,{Component:()=>d,app:()=>C});var o=t(859),l=t(320);const r=(e,n={})=>class extends HTMLElement{constructor(){super()}get component(){return this._component}get state(){return this._component.state}static get observedAttributes(){return(n.observedAttributes||[]).map((e=>e.toLowerCase()))}connectedCallback(){if(this.isConnected&&!this._component){const t=n||{};this._shadowRoot=t.shadow?this.attachShadow({mode:"open"}):this;const o=t.observedAttributes||[],l=o.reduce(((e,n)=>{const t=n.toLowerCase();return t!==n&&(e[t]=n),e}),{});this._attrMap=e=>l[e]||e;const r={};Array.from(this.attributes).forEach((e=>r[this._attrMap(e.name)]=e.value)),o.forEach((e=>{void 0!==this[e]&&(r[e]=this[e]),Object.defineProperty(this,e,{get:()=>r[e],set(n){this.attributeChangedCallback(e,r[e],n)},configurable:!0,enumerable:!0})})),requestAnimationFrame((()=>{const n=this.children?Array.from(this.children):[];if(this._component=new e({...r,children:n}).mount(this._shadowRoot,t),this._component._props=r,this._component.dispatchEvent=this.dispatchEvent.bind(this),this._component.mounted){const e=this._component.mounted(r,n,this._component.state);void 0!==e&&(this._component.state=e)}this.on=this._component.on.bind(this._component),this.run=this._component.run.bind(this._component),!1!==t.render&&this._component.run(".")}))}}disconnectedCallback(){this._component?.unload?.(),this._component?.unmount?.(),this._component=null}attributeChangedCallback(e,t,o){if(this._component){const l=this._attrMap(e);this._component._props[l]=o,this._component.run("attributeChanged",l,t,o),o!==t&&!1!==n.render&&window.requestAnimationFrame((()=>{this._component.run(".")}))}}},i=(e,n,t)=>{"undefined"!=typeof customElements&&customElements.define(e,r(n,t))},a={meta:new WeakMap,defineMetadata(e,n,t){this.meta.has(t)||this.meta.set(t,{}),this.meta.get(t)[e]=n},getMetadataKeys(e){return e=Object.getPrototypeOf(e),this.meta.get(e)?Object.keys(this.meta.get(e)):[]},getMetadata(e,n){return n=Object.getPrototypeOf(n),this.meta.get(n)?this.meta.get(n)[e]:null}};var s=t(741),u=t(634);const c=e=>e,p=o.A;class d{renderState(e,n=null){if(!this.view)return;let t=n||this.view(e);if(p.debug&&p.run("debug",{component:this,_:t?".":"-",state:e,vdom:t,el:this.element}),"object"!=typeof document)return;const o="string"==typeof this.element&&this.element?(0,u.oP)(this.element)||(0,u.bV)(this.element):this.element;if(!o)return void console.warn(`Component element not found: ${this.element}`);const l="_c";this.unload?o._component===this&&o.getAttribute(l)===this.tracking_id||(this.tracking_id=(new Date).valueOf().toString(),o.setAttribute(l,this.tracking_id),"undefined"!=typeof MutationObserver&&(this.observer||(this.observer=new MutationObserver((e=>{e[0].oldValue!==this.tracking_id&&document.body.contains(o)||(this.unload(this.state),this.observer.disconnect(),this.observer=null)}))),this.observer.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeOldValue:!0,attributeFilter:[l]}))):o.removeAttribute&&o.removeAttribute(l),o._component=this,!n&&t&&(t=(0,s.A)(t,this),this.options.transition&&document&&document.startViewTransition?document.startViewTransition((()=>p.render(o,t,this))):p.render(o,t,this)),this.rendered&&this.rendered(this.state)}setState(e,n={render:!0,history:!1}){const t=e;if(t?.[Symbol.asyncIterator])this.setState((async e=>{try{for(;;){const{value:t,done:o}=await e.next();if(o)break;this.setState(t,n)}}catch(e){console.error("Error in async iterator:",e)}})(t[Symbol.asyncIterator]()),n);else if(t?.[Symbol.iterator]&&"function"==typeof t.next)for(const e of t)this.setState(e,n);else if(e&&e instanceof Promise)Promise.resolve(e).then((t=>{this.setState(t,n),this._state=e}));else{if(this._state=e,null==e)return;this.state=e,!1!==n.render&&(n.transition&&document&&document.startViewTransition?document.startViewTransition((()=>this.renderState(e))):this.renderState(e)),!1!==n.history&&this.enable_history&&(this._history=[...this._history,e],this._history_idx=this._history.length-1),"function"==typeof n.callback&&n.callback(this.state)}}constructor(e,n,t,l){this.state=e,this.view=n,this.update=t,this.options=l,this._app=new o.q,this._actions=[],this._global_events=[],this._history=[],this._history_idx=-1,this._history_prev=()=>{this._history_idx--,this._history_idx>=0?this.setState(this._history[this._history_idx],{render:!0,history:!1}):this._history_idx=0},this._history_next=()=>{this._history_idx++,this._history_idx<this._history.length?this.setState(this._history[this._history_idx],{render:!0,history:!1}):this._history_idx=this._history.length-1},this.start=(e=null,n)=>{if(this.mount(e,{render:!0,...n}),this.mounted&&"function"==typeof this.mounted){const e=this.mounted({},[],this.state);void 0!==e&&this.setState(e)}return this}}mount(e=null,n){return console.assert(!this.element,"Component already mounted."),this.options=n={...this.options,...n},this.element=e,this.global_event=n.global_event,this.enable_history=!!n.history,this.enable_history&&(this.on(n.history.prev||"history-prev",this._history_prev),this.on(n.history.next||"history-next",this._history_next)),n.route&&(this.update=this.update||{},this.update[n.route]||(this.update[n.route]=c)),this.add_actions(),this.state=this.state??this.model??{},"function"==typeof this.state&&(this.state=this.state()),this.setState(this.state,{render:!!n.render,history:!0}),p.debug&&p.find("debug-create-component")?.length&&p.run("debug-create-component",this),this}is_global_event(e){return e&&(this.global_event||this._global_events.indexOf(e)>=0||e.startsWith("#")||e.startsWith("/")||e.startsWith("@"))}add_action(e,n,t={}){n&&"function"==typeof n?(t.global&&this._global_events.push(e),this.on(e,((...o)=>{p.debug&&p.run("debug",{component:this,_:">",event:e,p:o,current_state:this.state,options:t});try{const l=n(this.state,...o);p.debug&&p.run("debug",{component:this,_:"<",event:e,p:o,newState:l,state:this.state,options:t}),this.setState(l,t)}catch(n){console.error(`Error in component action '${e}':`,n),p.debug&&p.run("debug",{component:this,_:"!",event:e,p:o,error:n,state:this.state,options:t})}}),t)):console.warn(`Component action for '${e}' is not a valid function:`,n)}add_actions(){const e=this.update||{};a.getMetadataKeys(this).forEach((n=>{if(n.startsWith("apprun-update:")){const t=a.getMetadata(n,this);e[t.name]=[this[t.key].bind(this),t.options]}}));const n={};Array.isArray(e)?e.forEach((e=>{const[t,o,l]=e;t.toString().split(",").forEach((e=>n[e.trim()]=[o,l]))})):Object.keys(e).forEach((t=>{const o=e[t];("function"==typeof o||Array.isArray(o))&&t.split(",").forEach((e=>n[e.trim()]=o))})),n["."]||(n["."]=c),Object.keys(n).forEach((e=>{const t=n[e];"function"==typeof t?this.add_action(e,t):Array.isArray(t)&&this.add_action(e,t[0],t[1])}))}run(e,...n){if(this.state instanceof Promise)return Promise.resolve(this.state).then((t=>{this.state=t,this.run(e,...n)}));{const t=e.toString();return this.is_global_event(t)?p.run(t,...n):this._app.run(t,...n)}}on(e,n,t){const o=e.toString();return this._actions.push({name:o,fn:n}),this.is_global_event(o)?p.on(o,n,t):this._app.on(o,n,t)}runAsync(e,...n){const t=e.toString();return this.is_global_event(t)?p.runAsync(t,...n):this._app.runAsync(t,...n)}query(e,...n){return console.warn("component.query() is deprecated. Use component.runAsync() instead."),this.runAsync(e,...n)}unmount(){this.observer?.disconnect(),this._actions.forEach((e=>{const{name:n,fn:t}=e;this.is_global_event(n)?p.off(n,t):this._app.off(n,t)}))}}function h(){const e=o.A.find("#");if(e&&e.length>0)return o.A.run("#"),void o.A.run(m,"#");const n=o.A.find("/");if(n&&n.length>0)return o.A.run("/"),void o.A.run(m,"/");const t=o.A.find("#/");if(t&&t.length>0)return o.A.run("#/"),void o.A.run(m,"#/");console.warn("No subscribers for event: "),o.A.run(g,""),o.A.run(m,"")}d.__isAppRunComponent=!0;const f=(e,...n)=>{if(!e||e===m||e===g)return;const t=o.A.find(e);t&&0!==t.length?o.A.run(e,...n):(console.warn(`No subscribers for event: ${e}`),o.A.run(g,e,...n)),o.A.run(m,e,...n)},m="//",g="///",y=e=>{o.A.lastUrl!==e&&(o.A.lastUrl=e,function(e){if(!e)return void h();e=function(e){return e&&"/"!==e&&"#"!==e&&"#/"!==e&&e.endsWith("/")?e.slice(0,-1):e}(e);const n=o.A.basePath;n&&(e=function(e,n){if(!n||"/"===n||""===n)return e;const t=n.startsWith("/")?n:"/"+n;if(e.startsWith(t)){const n=e.substring(t.length);return n.startsWith("/")?n:"/"+n}return e}(e,n));const t=function(e){return e?e.startsWith("#/")?e.substring(2).split("/"):e.startsWith("#")||e.startsWith("/")?e.substring(1).split("/"):e.split("/"):[]}(e);let l;!function(e){const n=e.filter(Boolean);n.length>11&&console.warn(`Deep route hierarchy detected: ${n.join("/")} (${n.length} levels)`)}(t),l=e.startsWith("#/")?"hash-slash":e.startsWith("#")?"hash":e.startsWith("/")?"path":"non-prefixed";const r=function(e,n){const t=[];for(let o=e.length;o>0;o--){const l=e.slice(0,o);let r="";switch(n){case"path":r="/"+l.join("/");break;case"hash":r="#"+l.join("/");break;case"hash-slash":r="#/"+l.join("/");break;case"non-prefixed":r=l.join("/")}t.push(r)}return t}(t,l),i=function(e,n){for(let t=0;t<e.length;t++){const l=e[t],r=o.A.find(l);if(r&&r.length>0){const o=e.length-t;return{eventName:l,parameters:n.slice(o)}}}return null}(r,t);if(i)f(i.eventName,...i.parameters);else if(r.length>0){const n=r[r.length-1];console.warn(`No subscribers for event: ${n}`),o.A.run(g,e),o.A.run(m,e)}else h()}(e))};function v(e){return e&&"object"==typeof e&&"function"==typeof e.mount}function b(e){return"function"==typeof e&&e.prototype&&e.prototype.constructor===e&&(void 0!==e.prototype.mount||void 0!==e.prototype.state||void 0!==e.prototype.view)}function w(e){return"function"==typeof e&&!b(e)}async function k(e,n=3){let t=e,o=0;for(;w(t)&&o<n;)try{const e=await t();if(e===t)break;t=e,o++}catch(e){console.error(`Error executing component function: ${e}`);break}return t}const _=async(e,n)=>{for(const[t,l]of Object.entries(n))if(l&&t)if(v(l)){const n={route:t};l.mount(e,n)}else if(b(l)){const n={route:t};(new l).mount(e,n)}else if(w(l)){let n=await k(l);if(v(n)){const o={route:t};n.mount(e,o);continue}if(b(n)){const o={route:t};(new n).mount(e,o);continue}o.A.on(t,((...n)=>{const t=l(...n);if("string"!=typeof e||(e=document.querySelector(e)))return o.A.render(e,t);console.error(`Element not found: ${e}`)}))}else console.error("Invalid component: component must be a class, instance, or function that returns a class/instance");else console.error(`Invalid component configuration: component=${l}, route=${t}`)};var S=t(672);const C=o.A;if(!C.start){C.version=S.a,C.h=C.createElement=l.createElement,C.render=l.render,C.Fragment=l.Fragment,C.webComponent=i,C.safeHTML=l.safeHTML,C.start=(e,n,t,o,l)=>{const r={render:!0,global_event:!0,...l},i=new d(n,t,o);return l&&l.rendered&&(i.rendered=l.rendered),l&&l.mounted&&(i.mounted=l.mounted),i.start(e,r),i},C.query=C.query||C.runAsync;const e=e=>{};if(C.on("/",e),C.on("debug",(n=>e)),C.on(m,e),C.on(g,e),C.route=y,C.on("route",(e=>C.route&&C.route(e))),"object"==typeof document){let e=location.pathname;e.endsWith("/")&&(e=e.slice(0,-1)),C.basePath=e,document.addEventListener("DOMContentLoaded",(()=>{const e=document.body.hasAttribute("apprun-no-init")||C["no-init-route"]||!1,n=C.find("#")||C.find("#/")||!1;window.addEventListener("hashchange",(()=>y(location.hash))),window.addEventListener("popstate",(()=>y(location.pathname))),n?!e&&y(location.hash):(!e&&(()=>{const e=C.basePath||"";let n=location.pathname;e&&n.startsWith(e)&&(n=n.substring(e.length),n.startsWith("/")||(n="/"+n)),y(n)})(),document.body.addEventListener("click",(e=>{const n=e.target;if(!n)return;const t="A"===n.tagName?n:n.closest("a");if(t&&t.origin===location.origin&&t.pathname){e.preventDefault();const n=(C.basePath||"")+t.pathname;history.pushState(null,"",n),y(t.pathname)}})))}))}if("object"==typeof window){const e=window;e.Component=d,e._React=e.React,e.React=C,e.on=function(e,n={}){return function(t,o){const l=e?e.toString():o;a.defineMetadata(`apprun-update:${l}`,{name:l,key:o,options:n},t)}},e.customElement=function(e,n){return function(t){return i(e,t,n),t}},e.safeHTML=l.safeHTML}C.use_render=(e,n=0)=>{C.render=0===n?(n,t)=>e(t,n):(n,t)=>e(n,t)},C.use_react=(e,n)=>{if(e&&n)if("function"==typeof e.createElement)if(e.Fragment)if(C.h=C.createElement=e.createElement,C.Fragment=e.Fragment,e.version&&e.version.startsWith("18")){if(!n.createRoot||"function"!=typeof n.createRoot)return void console.error("AppRun use_react: ReactDOM.createRoot not found in React 18+");C.render=(e,t)=>{e&&void 0!==t&&(e._root||(e._root=n.createRoot(e)),e._root.render(t))}}else{if(!n.render||"function"!=typeof n.render)return void console.error("AppRun use_react: ReactDOM.render not found in legacy React");C.render=(e,t)=>n.render(t,e)}else console.error("AppRun use_react: Invalid React object - Fragment not found");else console.error("AppRun use_react: Invalid React object - createElement method not found");else console.error("AppRun use_react: React and ReactDOM parameters are required")},C.addComponents=_}}},n={};function t(o){var l=n[o];if(void 0!==l)return l.exports;var r=n[o]={exports:{}};return e[o](r,r.exports,t),r.exports}t.d=(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};t.r(o);var l=t(971);class r extends l.Component{constructor(){super(...arguments),this.view=({code:e,hide_code:n})=>l.app.h(l.app.Fragment,null,l.app.h("style",null,"\n.CodeMirror, .apprun-play iframe {\n  height: 100%;\n  border: dotted gray 1px;\n}\n\n.apprun-play {\n  height: 100%;\n  display: flex;\n  font-size: 1.1rem;\n}\n\n.apprun-play .col {\n  margin: 2px;\n}\n\n.apprun-play .editor, .apprun-play .preview {\n  width: 100%;\n  height: 100%;\n}\n"),n?l.app.h("div",{class:"apprun-play"},l.app.h("iframe",{class:"preview"})):l.app.h("div",{class:"apprun-play"},l.app.h("div",{class:"col",style:"width:75%"},l.app.h("textarea",{class:"editor"},e)),l.app.h("div",{class:"col",style:"flex:1"},l.app.h("iframe",{class:"preview"})))),this.mounted=e=>{const n=this.element,t=e["code-id"],o=e["hide-code"],l=e["code-width"];let r;r=t?document.getElementById(t):n.previousElementSibling||n.parentElement.previousElementSibling;const i=r?.innerText||r?.value||n.textContent;return r&&(r.style.display="none"),{code:i,hide_code:o,code_width:l}},this.rendered=({code:e,hide_code:n,code_width:t})=>{const o=this.element,l=o.querySelector(".apprun-play .editor");let r=o.querySelector(".apprun-play .preview");if(!r||!l)return;const i=e=>{const n=r.cloneNode();r.parentNode?.replaceChild(n,r),r=n;const t=r.contentWindow?.document;t&&(t.open(),e.indexOf("<html")>=0?t.write(e):t.write((e=>`<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <meta http-equiv="X-UA-Compatible" content="ie=edge">\n  <title>AppRun Playground</title>\n  <style>\n    body {\n      font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;\n      margin: 2em;\n    }\n  </style>\n  <script src="https://cdn.jsdelivr.net/npm/typescript@latest"><\/script>\n  <script src="dist/apprun-html.js"><\/script>\n</head>\n<body>\n<pre id="code" style="display:none">${(e=>e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;"))(e)}</pre>\n<script type="module">\nconst code = document.getElementById('code').innerText;\nconst compiled = ts.transpileModule(code, {\n  compilerOptions: {\n    "jsx": "react",\n    "jsxFactory": "app.h",\n    "jsxFragmentFactory": "app.Fragment",\n    "target": "es2020",\n    "module": "esnext",\n  },\n  reportDiagnostics: true,\n});\n\nif (compiled.diagnostics && compiled.diagnostics.length) {\n  const pre = document.createElement('pre');\n  pre.style = 'font-size: 10px;';\n  pre.innerText = compiled.diagnostics.map(d => {\n    const start = d.start;\n    const end = d.start + d.length;\n    const line = code.substring(0, end).split('\\n').length;\n    const column = code.substring(0, end).split('\\n').pop().length;\n    return \`Line: \${line}, Column: \${column}, \${d.messageText}\`;\n  }).join('\\n');\n  document.body.appendChild(pre);\n} else {\n  window.onerror = function () {\n    const pre = document.createElement('pre');\n    pre.style = 'font-size: 10px;';\n    pre.innerText = compiled.outputText;;\n    document.body.appendChild(pre);\n  };\n  const script = document.createElement('script');\n  script.type = 'module';\n  script.text = compiled.outputText;\n  document.body.appendChild(script);\n}\n<\/script>\n</body>\n</html>`)(e)),t.close())};if(e&&i(e),!n&&l)if(t&&(l.parentElement.style.width=t),"undefined"==typeof CodeMirror)l.onkeyup=()=>i(l.value);else{const n=CodeMirror.fromTextArea(l,{lineNumbers:!0,mode:"jsx"});n.setValue(e),n.on("change",(e=>i(e.getValue())))}}}}return l.app.webComponent("apprun-code",r),o})()));
+//# sourceMappingURL=apprun-code.js.map