### Initialize and Run Local Development

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/ui/README.md

Commands to install dependencies and start the Vite development server.

```bash
cd web/ui
pnpm install         # once
pnpm dev             # launches Vite on http://127.0.0.1:5173
```

--------------------------------

### SchemaUI CLI Command Example

Source: https://github.com/yuniqueunic/schemaui/blob/main/README.ZH.md

Example of running the schemaui CLI with schema, config, and output options, including reading from stdin and writing to multiple files.

```bash
schemaui \
  --schema ./schema.json \
  --config ./defaults.yaml \
  -o - \
  -o ./config.toml ./config.json
```

--------------------------------

### SchemaUI Web Mode Example

Source: https://github.com/yuniqueunic/schemaui/blob/main/docs/en/cli_usage.md

Launch SchemaUI in web mode, serving a UI in the browser. This example configures schema, config, and output, binding to a random available port.

```bash
schemaui web \
  --schema ./schema.json \
  --config ./defaults.json \
  --host 127.0.0.1 --port 0 \
  -o -
```

--------------------------------

### Install schemaui-cli using Cargo binstall

Source: https://github.com/yuniqueunic/schemaui/blob/main/docs/en/cli_usage.md

Installs prebuilt schemaui-cli binaries from GitHub releases using cargo-binstall.

```bash
cargo binstall schemaui-cli
```

--------------------------------

### Basic SchemaUI Runtime Example

Source: https://github.com/yuniqueunic/schemaui/blob/main/README.md

This example demonstrates how to initialize and run the SchemaUI TUI with a predefined JSON schema and default options. It requires the `color_eyre` crate for error handling.

```rust
use schemaui::prelude::*;
use serde_json::json;

fn main() -> color_eyre::Result<()> {
    color_eyre::install()?;
    let schema = json!({
        "$schema": "http://json-schema.org/draft-07/schema#",
        "title": "Service Runtime",
        "type": "object",
        "properties": {
            "metadata": {
                "type": "object",
                "properties": {
                    "serviceName": {"type": "string"},
                    "environment": {
                        "type": "string",
                        "enum": ["dev", "staging", "prod"]
                    }
                },
                "required": ["serviceName"]
            },
            "runtime": {
                "type": "object",
                "properties": {
                    "http": {
                        "type": "object",
                        "properties": {
                            "host": {"type": "string", "default": "0.0.0.0"},
                            "port": {"type": "integer", "minimum": 1024, "maximum": 65535}
                        }
                    }
                }
            }
        },
        "required": ["metadata", "runtime"]
    });

    let options = UiOptions::default();
    let ui = SchemaUI::new(schema)
        .with_title("SchemaUI Demo")
        .with_options(options.clone());
    let frontend = TuiFrontend { options };
    let value = ui.run_with_frontend(frontend)?;
    println!("{}", serde_json::to_string_pretty(&value)?);
    Ok(())
}

```

--------------------------------

### Install schemaui-cli using Scoop

Source: https://github.com/yuniqueunic/schemaui/blob/main/docs/en/cli_usage.md

Installs the schemaui-cli tool on Windows using the Scoop package manager.

```bash
scoop install https://raw.githubusercontent.com/YuniqueUnic/schemaui/main/packaging/scoop/schemaui-cli.json
```

--------------------------------

### Install schemaui-cli using Homebrew

Source: https://github.com/yuniqueunic/schemaui/blob/main/docs/en/cli_usage.md

Installs the schemaui-cli tool on macOS or Linux using the Homebrew package manager.

```bash
brew install YuniqueUnic/schemaui/schemaui
```

--------------------------------

### Install schemaui-cli using Cargo

Source: https://github.com/yuniqueunic/schemaui/blob/main/docs/en/cli_usage.md

Installs the schemaui-cli tool from crates.io using the Cargo package manager.

```bash
cargo install schemaui-cli
```

--------------------------------

### Get schemaui-cli help

Source: https://github.com/yuniqueunic/schemaui/blob/main/docs/en/cli_usage.md

Displays the help message for the schemaui binary, showing available commands and options.

```bash
schemaui --help             # binary is named `schemaui` via the clap metadata
```

--------------------------------

### Run schemaui-cli from source

Source: https://github.com/yuniqueunic/schemaui/blob/main/docs/en/cli_usage.md

Installs and runs the schemaui-cli tool directly from the source code using Cargo.

```bash
cargo run -p schemaui-cli -- tui --schema ./schema.json --config ./config.yaml
```

--------------------------------

### SchemaUI Library Interoperability Example

Source: https://github.com/yuniqueunic/schemaui/blob/main/docs/en/cli_usage.md

This Rust code demonstrates how to initialize and configure the SchemaUI library programmatically, mirroring CLI functionality.

```rust
let mut ui = SchemaUI::new(schema);
if let Some(title) = cli.title.as_ref() {
    ui = ui.with_title(title.clone());
}
if let Some(defaults) = config_value.as_ref() {
    ui = ui.with_default_data(defaults);
}
if let Some(options) = output_settings {
    ui = ui.with_output(options);
}
ui.run()?;
```

--------------------------------

### React Start Transition

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Marks a state update as a non-urgent transition. This allows the UI to remain responsive during the update.

```javascript
e.startTransition = function(e) {
  var t = w.T,
    n = {},
    r = w.T = n
  try {
    var i = e(),
      a = w.S
    a !== null && a(n, i),
    typeof i == "object" && i && typeof i.then == "function" && i.then(C, P)
  } catch (e) {
    P(e)
  } finally {
    t !== null && n.types !== null && (t.types = n.types),
    w.T = t
  }
}
```

--------------------------------

### Basic Web UI Session Setup

Source: https://github.com/yuniqueunic/schemaui/blob/main/README.md

Use this to host a browser-based UI for schema configuration. It requires a JSON schema and provides a local address to access the UI. The session runs until explicitly exited or an error occurs.

```rust
use schemaui::web::session::{
    ServeOptions,
    WebSessionBuilder,
    bind_session,
};

# async fn run() -> anyhow::Result<()> {
let schema = serde_json::json!({
    "$schema": "http://json-schema.org/draft-07/schema#",
    "type": "object",
    "properties": {
        "host": {"type": "string", "default": "127.0.0.1"},
        "port": {"type": "integer", "default": 8080}
    },
    "required": ["host", "port"]
});

let config = WebSessionBuilder::new(schema)
    .with_title("Service Config")
    .build()?;
let session = bind_session(config, ServeOptions::default()).await?;
println!("visit http://{}/", session.local_addr());
let value = session.run().await?;
println!("final JSON: {}", serde_json::to_string_pretty(&value)?);
# Ok(())
# }

```

--------------------------------

### Keymap JSON Example

Source: https://github.com/yuniqueunic/schemaui/blob/main/README.ZH.md

Defines a keyboard shortcut with an ID, English and Chinese descriptions, applicable contexts, an action, and a list of key combinations.

```json
{
  "id": "list.move.up",
  "description": "Move entry up",
  "descriptionZh": "条目上移",
  "contexts": ["collection", "overlay"],
  "action": { "kind": "ListMove", "delta": -1 },
  "combos": ["Ctrl+Up"]
}
```

--------------------------------

### Define Keymap JSON Entry

Source: https://github.com/yuniqueunic/schemaui/blob/main/docs/en/tui-architecture-overview.md

Example of a single key binding definition in the default keymap JSON file.

```json
{
  "id": "list.move.up",
  "description": "Move entry up",
  "contexts": ["collection", "overlay"],
  "dispatch": true,
  "action": { "kind": "listMove", "delta": -1 },
  "combos": ["Ctrl+Up"]
}
```

--------------------------------

### Get Current Help Text Based on Contexts

Source: https://github.com/yuniqueunic/schemaui/blob/main/docs/en/tui-architecture-overview.md

Retrieves help text by determining current keymap contexts based on application focus and options.

```rust
fn current_help_text(&self) -> Option<String> {
    if !self.options.show_help { return None; }
    let contexts = self.current_help_contexts();
    self.keymap_store.help_text_for_contexts(&contexts)
}
```

--------------------------------

### Event Flow from KeyEvent to AppCommand/FormCommand

Source: https://github.com/yuniqueunic/schemaui/blob/main/docs/en/tui-architecture-overview.md

Illustrates the simplified event processing pipeline, starting from a crossterm KeyEvent to either an AppCommand or FormCommand.

```text
KeyEvent (crossterm)
    │
    ▼
InputRouter::classify
    │  uses KeymapStore::classify (KeyPattern match)
    ▼
KeyAction
    │
    ▼
KeyBindingMap::resolve
    │
    ▼
CommandDispatch::{Form(FormCommand), App(AppCommand)}
    │
    ├─ FormCommand  → FormEngine & FormState
    └─ AppCommand   → App::handle_app_command / handle_overlay_app_command
```

--------------------------------

### Application Initialization

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Entry point for rendering the React application root.

```javascript
(0,g.createRoot)(document.getElementById("root")).render((0,z.jsx)(_.StrictMode,{children:(0,z.jsxs)(ze,{children:[(0,z.jsx)(xm,{}),(0,z.jsx)(le,{richColors:!0,position:"bottom-right"})]})}));
```

--------------------------------

### Initialize JIT Engine Configuration

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Sets up the JIT engine's configuration, including caching, class name parsing, and modifier sorting.

```javascript
At=e=>({cache:Ct(e.cacheSize),parseClassName:Ot(e),sortModifiers:kt(e),...dt(e)})
```

--------------------------------

### Get Element Dimensions

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Retrieves the width and height of an element. This is a simple wrapper around `getBoundingClientRect()`.

```javascript
function qo(e){let{width:t,height:n}=Oo(e);return{width:t,height:n}}
```

--------------------------------

### Get Document Element

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Retrieves the document element of a given element. This is typically the `<html>` element.

```javascript
function ao(e){return e.ownerDocument.documentElement}
```

--------------------------------

### Get Form Action Value

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Safely retrieves the action value from a form element or submitter.

```javascript
function dd(e){return e==null||typeof e==`symbol`||typeof e==`boolean`?null:typeof e==`function`?e:Yt(""+e)}
```

--------------------------------

### Get Current Context Value

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Retrieves the current value of a context, initializing tracking if necessary.

```javascript
function qi(e){return Yi(Ri,e)}
```

--------------------------------

### Execute TUI Pipeline in Rust

Source: https://github.com/yuniqueunic/schemaui/blob/main/docs/en/structure_design.md

Demonstrates the initialization of a SchemaPipeline and execution via the TuiFrontend.

```rust
fn run_tui(schema: Value, defaults: Option<Value>) -> Result<Value> {
    let pipeline = SchemaPipeline::new(schema)
        .with_title(Some("Title".into()))
        .with_defaults(defaults);

    let frontend = TuiFrontend { options: UiOptions::default() };
    pipeline.run_with_frontend(frontend)
}
```

--------------------------------

### Initialize Popper.js Configuration

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Sets up the initial configuration for Popper.js, including platform-specific utilities and a map for caching offset parents.

```javascript
var ds=(e,t,n)=>{let r=new Map,i={platform:es,...n},a={...i.platform,_c:r}
```

--------------------------------

### Getting DOM Node from Fiber

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Returns the DOM node associated with a React Fiber node.

```javascript
function ht(e){var t=e[ut];return t||=e[ut]={hoistableStyles:new Map,hoistableScripts:new Map},t}
```

--------------------------------

### GET /api/session

Source: https://context7.com/yuniqueunic/schemaui/llms.txt

Retrieves the current session state, including the schema, UI AST, and current data.

```APIDOC
## GET /api/session

### Description
Retrieves the current session state, including the schema, UI AST, and current data.

### Method
GET

### Endpoint
/api/session
```

--------------------------------

### Initialize WebSessionBuilder

Source: https://context7.com/yuniqueunic/schemaui/llms.txt

Creates a browser-based configuration editor served via Axum. The session provides endpoints for management and validation.

```rust
use schemaui::web::session::{
    WebSessionBuilder,
    ServeOptions,
    bind_session,
};
use serde_json::json;

async fn run_web_ui() -> anyhow::Result<()> {
    let schema = json!({
        "$schema": "http://json-schema.org/draft-07/schema#",
        "type": "object",
        "properties": {
            "host": {"type": "string", "default": "127.0.0.1"},
            "port": {"type": "integer", "default": 8080}
        },
        "required": ["host", "port"]
    });

    // Build web session configuration
    let config = WebSessionBuilder::new(schema)
        .with_title("Service Config")
        .with_initial_data(json!({"host": "0.0.0.0", "port": 3000}))
        .build()?;

    // Configure serve options (0 = random port)
    let options = ServeOptions {
        host: "127.0.0.1".parse()?,
        port: 0,
    };

    // Bind and run the session
    let session = bind_session(config, options).await?;
    println!("Web UI available at http://{}/", session.local_addr());

    // Block until user saves and exits
    let result = session.run().await?;
    println!("Final config: {}", serde_json::to_string_pretty(&result)?);
    Ok(())
}
```

--------------------------------

### Get Clipping Ancestors

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Retrieves the list of ancestors that clip the given element. This is used to determine the clipping rectangle.

```javascript
function Go(e,t){let n=t.get(e);if(n)return n;let r=Eo(e,[],!1).filter(e=>so(e)&&J(e)!==\`body\`),i=null,a=So(e).position===\`fixed\`,o=a?wo(e):e;for(;so(o)&&!xo(o);){let t=So(o),n=vo(o);!n&&t.position===\`fixed\`&&(i=null),(a?!n&&!i:!n&&t.position===\`static\`&&i&&(i.position===\`absolute\`||i.position===\`fixed\`)||uo(o)&&!n&&Wo(e,o))?r=r.filter(e=>e!==o):i=t,o=wo(o)}return t.set(e,r),r}
```

--------------------------------

### Run WebFrontend via SchemaUI

Source: https://context7.com/yuniqueunic/schemaui/llms.txt

Provides a direct method to launch the web UI mode using the SchemaUI builder.

```rust
use schemaui::{SchemaUI, WebFrontend};
use schemaui::web::session::ServeOptions;
use serde_json::json;

let schema = json!({
    "type": "object",
    "properties": {
        "api_key": {"type": "string"},
        "endpoint": {"type": "string", "default": "https://api.example.com"}
    }
});

let serve_options = ServeOptions {
    host: "127.0.0.1".parse()?,
    port: 8080,
};

let result = SchemaUI::new(schema)
    .with_title("API Configuration")
    .run_web(serve_options)?;

println!("Configured: {}", serde_json::to_string_pretty(&result)?);
```

--------------------------------

### Getting React Fiber Node

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Retrieves the React Fiber node from a given element, checking for specific tags.

```javascript
function mt(e){var t=e[it]||e[ot];if(t){var n=t.tag;if(n===5||n===6||n===13||n===31||n===26||n===27||n===3)return t}return null}
```

--------------------------------

### SchemaUI TUI with Schema, Config, and Dual Outputs

Source: https://github.com/yuniqueunic/schemaui/blob/main/docs/en/cli_usage.md

Use this command to run the SchemaUI TUI with both a schema and configuration file, outputting to both stdout and a file.

```bash
schemaui tui \
  --schema ./schema.json \
  --config ./config.yaml \
  -o - \
  -o ./edited.toml
```

--------------------------------

### React useTransition Hook

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Hook for managing transitions. Returns a function to start a transition and a boolean indicating if a transition is in progress.

```javascript
e.useTransition = function() {
  return w.H.useTransition()
}
```

--------------------------------

### SchemaUI with Config Only (Schema Inferred)

Source: https://github.com/yuniqueunic/schemaui/blob/main/docs/en/cli_usage.md

Run SchemaUI using only a configuration file, inferring the schema from the input. The configuration is read from stdin.

```bash
cat defaults.yaml | schemaui --config - --output ./edited.json
```

--------------------------------

### Get Element Rects Relative to Document

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Calculates the position and dimensions of an element relative to the document. This is a core function for positioning.

```javascript
function Jo(e,t,n){let r=co(t),i=ao(t),a=n===\`fixed\`,o=Po(e,!0,a,t),s={scrollLeft:0,scrollTop:0},c=ba(0);function l(){c.x=Fo(i)}if(r||!r&&!a)if((J(t)!==\`body\`||uo(i))&&(s=Co(t)),r){let e=Po(t,!0,a,t);c.x=e.x+t.clientLeft,c.y=e.y+t.clientTop}else i&&l();a&&!r&&i&&l();let u=i&&!r&&!a?Io(i,s):ba(0);return{x:o.left+s.scrollLeft-c.x-u.x,y:o.top+s.scrollTop-c.y-u.y,width:o.width,height:o.height}}
```

--------------------------------

### Handle Host Component Creation (React)

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

This snippet handles the creation and initial mounting of host components (like `div`, `span`, `svg`). It includes logic for setting attributes, appending children, and handling specific elements like `script` and `select`. Use this for understanding how React creates DOM elements internally.

```javascript
case 5:if(fe(t),a=t.type,e!==null&&t.stateNode!=null)e.memoizedProps!==r&&Dc(t);else{if(!r){if(t.stateNode===null)throw Error(i(166));return Mc(t),null}if(o=ae.current,Ni(t))ji(t,o);else{var s=Bd(se.current);switch(o){case 1:o=s.createElementNS(\`http://www.w3.org/2000/svg\`,a);break;case 2:o=s.createElementNS(\`http://www.w3.org/1998/Math/MathML\`,a);break;default:switch(a){case\
svg\
:o=s.createElementNS(\`http://www.w3.org/2000/svg\`,a);break;case\
math\
:o=s.createElementNS(\`http://www.w3.org/1998/Math/MathML\`,a);break;case\
script\
:o=s.createElement(\`div\
),o.innerHTML=\`<script><\/script>\
,o=o.removeChild(o.firstChild);break;case\
select\
:o=typeof r.is==\
string\
?s.createElement(\`select\
,{is:r.is}):s.createElement(\`select\
),r.multiple?o.multiple=!0:r.size&&(o.size=r.size);break;default:o=typeof r.is==\
string\
?s.createElement(a,{is:r.is}):s.createElement(a)}}o\[it\]=t,o\[at\]=r;a:for(s=t.child;s!==null;){if(s.tag===5||s.tag===6)o.appendChild(s.stateNode);else if(s.tag!==4&&s.tag!==27&&s.child!==null){s.child.return=s,s=s.child;continue}if(s===t)break a;for(;s.sibling===null;){if(s.return===null||s.return===t)break a;s=s.return}s.sibling.return=s.return,s=s.sibling}t.stateNode=o;a:switch(Pd(o,a,r),a){case\
button\
:case\
input\
:case\
select\
:case\
textarea\
:r=!!r.autoFocus;break a;case\
img\
:r=!0;break a;default:r=!1}r&&Dc(t)}}return Mc(t),Oc(t,t.type,e===null?null:e.memoizedProps,t.pendingProps,n),null;
```

--------------------------------

### Get Element Rects

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Calculates the `reference` and `floating` element rects relative to the offset parent. Used for positioning calculations.

```javascript
var Qo=async function(e){let t=this.getOffsetParent||Zo,n=this.getDimensions,r=await n(e.floating);return{reference:Jo(e.reference,await t(e.floating),e.strategy),floating:{x:0,y:0,width:r.width,height:r.height}}}
```

--------------------------------

### Get the context element for positioning

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Returns the element to use for positioning calculations. If the input is not an element, it returns the `contextElement` property.

```javascript
function ko(e){
  return so(e)?e:e.contextElement
}
```

--------------------------------

### Prism.js Initialization

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Initializes Prism.js for syntax highlighting. Includes utility functions for language detection, manipulation, and highlighting elements.

```javascript
var qf=c(o(((e,t)=>{var n=function(e){var t=/(?:^|\s)lang(?:uage)?-(\[\w-\]+)(?=\s|$)/i,n=0,r={},i={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(t){return t instanceof a?new a(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,\`&amp;\[).replace(/</g,\`&lt;\[).replace(/\u00a0/g,\` \`)},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.\[__id\]||Object.defineProperty(e,\`\[__id\]",{value:++n}),e.\[__id\]},clone:function e(t,n){n||={};var r,a;switch(i.util.type(t)){case\`Object\`:if(a=i.util.objId(t),n\[a\])return n\[a\];for(var o in r={},n\[a\]=r,t)t.hasOwnProperty(o)&&(r\[o\]=e(t\[o\]),n));return r;case\`Array\`:return a=i.util.objId(t),n\[a\]?n\[a\]:(r=\[\]),n\[a\]=r,t.forEach(function(t,i){r\[i\]=e(t,n)}),r);default:return t}},getLanguage:function(e){for(;e;){var n=t.exec(e.className);if(n)return n\[1\].toLowerCase();e=e.parentElement}return\`none\`},setLanguage:function(e,n){e.className=e.className.replace(RegExp(t,\`gi\`),\`\[\]),e.classList.add(\`language-\`+n)},currentScript:function(){if(typeof document>\`u\`)return null;if(document.currentScript&&document.currentScript.tagName===\`SCRIPT\`)return document.currentScript;try{throw Error()}catch(r){var e=(/at \[^
]*\((.*):[^:]+:[^:]+\)$/i.exec(r.stack)||[])[1];if(e){var t=document.getElementsByTagName(\`script\`);for(var n in t)if(t[n].src==e)return t[n]}return null}},isActive:function(e,t,n){for(var r=\`no-\`+t;e;){var i=e.classList;if(i.contains(t))return!0;if(i.contains(r))return!1;e=e.parentElement}return!!n}},languages:{plain:r,plaintext:r,text:r,txt:r,extend:function(e,t){var n=i.util.clone(i.languages[e]);for(var r in t)n[r]=t[r];return n},insertBefore:function(e,t,n,r){r||=i.languages;var a=r[e],o={};for(var s in a)if(a.hasOwnProperty(s)){if(s==t)for(var c in n)n.hasOwnProperty(c)&&(o[c]=n[c]);n.hasOwnProperty(s)||(o[s]=a[s])}var l=r[e];return r[e]=o,i.languages.DFS(i.languages,function(t,n){n===l&&t!=e&&(this[t]=o)}),o},DFS:function e(t,n,r,a){a||={};var o=i.util.objId;for(var s in t)if(t.hasOwnProperty(s)){n.call(t,s,t[s],r||s);var c=t[s],l=i.util.type(c);l===\`Object\`&&!a[o(c)]?(a[o(c)]=!0,e(c,n,null,a)):l===\`Array\`&&!a[o(c)]&&(a[o(c)]=!0,e(c,n,s,a))}}},plugins:{},highlightAll:function(e,t){i.highlightAllUnder(document,e,t)},highlightAllUnder:function(e,t,n){var r={callback:n,container:e,selector:\`code[class*=\
```

--------------------------------

### Get the frame element of a window

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Retrieves the `frameElement` associated with a window, if it exists. This is typically used when dealing with nested iframes.

```javascript
function Do(e){
  return e.parent&&Object.getPrototypeOf(e.parent)?e.frameElement:null
}
```

--------------------------------

### Select Content Implementation (Positioning and Interaction)

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Implements the core logic for the Select content, including positioning, focus management, keyboard navigation, and outside pointer event handling. It uses several custom hooks and refs for state management.

```javascript
var ql=10;
let[Jl,Yl]=Ml(Gl);
var Xl=\`SelectContentImpl\";
var Zl=Si(\`SelectContent.RemoveScroll\");
var Ql=_.forwardRef((e,t)=>{
  let{\"__scopeSelect\":n,position:r=\`item-aligned`\`,onCloseAutoFocus:i,onEscapeKeyDown:a,onPointerDownOutside:o,side:s,sideOffset:c,align:l,alignOffset:u,arrowPadding:d,collisionBoundary:f,collisionPadding:p,sticky:m,hideWhenDetached:h,avoidCollisions:g,...
  v}=e,
  y=X(Gl,n),
  [b,x]=\_.useState(null),
  [S,C]=\_.useState(null),
  w=B(t,e=>x(e)),
  [T,E]=\_.useState(null),
  [ee,D]=\_.useState(null),
  O=Al(n),
  [k,A]=\_.useState(!1),
  j=\_.useRef(!1);

  \_.useEffect(()=>{
    if(b)return gc(b)
  },[b]);
  qi();

  let M=\_.useCallback(e=>{
    let[t,...n]=O().map(e=>e.ref.current),
    [r]=n.slice(-1),
    i=document.activeElement;
    for(let n of e)
      if(n===i||
        (n?.scrollIntoView({block:\`nearest`\`}),
        n===t&&S&&(S.scrollTop=0),
        n===r&&S&&(S.scrollTop=S.scrollHeight),
        n?.focus(),
        document.activeElement!==i))
        return
  },[O,S]);

  let N=\_.useCallback(()=>M([T,b]),[M,T,b]);
  \_.useEffect(()=>{
    k&&N()
  },[k,N]);

  let{onOpenChange:te,triggerPointerDownPosRef:P}=y;

  \_.useEffect(()=>{
    if(b){
      let e={x:0,y:0};
      let t=t=>{
        e={x:Math.abs(Math.round(t.pageX)-(P.current?.x??0)),y:Math.abs(Math.round(t.pageY)-(P.current?.y??0))}
      };
      let n=n=>{
        e.x<=10&&e.y<=10?n.preventDefault():b.contains(n.target)||te(!1),
        document.removeEventListener(\`pointermove\`,t),
        P.current=null
      };
      return P.current!==null&&
        (document.addEventListener(\`pointermove\`,t),document.addEventListener(\`pointerup\`,n,{capture:!0,once:!0})),
        ()=>{
          document.removeEventListener(\`pointermove\`,t),
          document.removeEventListener(\`pointerup\`,n,{capture:!0})
        }
    }
  },[b,te,P]);

  \_.useEffect(()=>{
    let e=()=>te(!1);
    return window.addEventListener(\`blur\`,e),window.addEventListener(\`resize\`,e),
    ()=>{
      window.removeEventListener(\`blur\`,e),
      window.removeEventListener(\`resize\`,e)
    }
  },[te]);

  let[F,ne]=Nu(e=>{
    let t=O().filter(e=>!e.disabled),
    n=Pu(t,e,t.find(e=>e.ref.current===document.activeElement));
    n&&setTimeout(()=>n.ref.current.focus())
  });

  let re=\_.useCallback((e,t,n)=>{
    let r=!j.current&&!n;
    (y.value!==void 0&&y.value===t||r)&&(E(e),r&&(j.current=!0))
  },[y.value]);

  let ie=\_.useCallback(()=>b?.focus(),[b]);

  let I=\_.useCallback((e,t,n)=>{
    let r=!j.current&&!n;
    (y.value!==void 0&&y.value===t||r)&&D(e)}
  ,[y.value]);

  let L=r===\`popper`?nu:eu,
  R=L===nu?{side:s,sideOffset:c,align:l,alignOffset:u,arrowPadding:d,collisionBoundary:f,collisionPadding:p,sticky:m,hideWhenDetached:h,avoidCollisions:g}:{};

  return(
    (0,z.jsx)(Jl,{scope:n,content:b,viewport:S,onViewportChange:C,itemRefCallback:re,selectedItem:T,onItemLeave:ie,itemTextRefCallback:I,focusSelectedItem:N,selectedItemText:ee,position:r,isPositioned:k,searchRef:F,children:
      (0,z.jsx)(Tl,{as:Zl,allowPinchZoom:!0,children:
        (0,z.jsx)($i,{asChild:!0,trapped:y.open,onMountAutoFocus:e=>{
          e.preventDefault()
        },onUnmountAutoFocus:G(i,e=>{
          y.trigger?.focus({preventScroll:!0}),
          e.preventDefault()
        }),children:
          (0,z.jsx)(zi,{asChild:!0,disableOutsidePointerEvents:!0,onEscapeKeyDown:a,onPointerDownOutside:o,onFocusOutside:e=>e.preventDefault(),onDismiss:()=>y.onOpenChange(!1),children:
            (0,z.jsx)(L,{role:\`listbox\`,
id:y.contentId,
"data-state":y.open?
  `open`:
  `closed`,
dir:y.dir,
onContextMenu:e=>e.preventDefault(),
...v,
...R,
onPlaced:()=>A(!0),
ref:w,
style:{display:\`flex\`,flexDirection:\`column\`,outline:\`none\`,...
v.style},
onKeyDown:G(v.onKeyDown,e=>{
  let t=e.ctrlKey||e.altKey||e.metaKey;
  if(e.key===\`Tab\`&&e.preventDefault(),!t&&e.key.length===1&&ne(e.key),
  [\`ArrowUp\`,
  \`ArrowDown\`,
  \`Home\`,
  \`End\`].includes(e.key)){
    let t=O().filter(e=>!e.disabled).map(e=>e.ref.current);
    if([\`ArrowUp\`,

```

--------------------------------

### Get Retry Lane for Suspended Component

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Retrieves the retry lane for a suspended component. This lane indicates when the component can be retried.

```javascript
function qu(e){var t=e.memoizedState,n=0;t!==null&&(n=t.retryLane),Ku(e,n)}
```

--------------------------------

### Initialize TuiFrontend Directly

Source: https://context7.com/yuniqueunic/schemaui/llms.txt

Provides fine-grained control over TUI session initialization. Useful for custom options and manual artifact management.

```rust
use schemaui::{SchemaUI, TuiFrontend, UiOptions, TuiArtifacts};
use serde_json::json;

let schema = json!({
    "type": "object",
    "properties": {
        "enabled": {"type": "boolean", "default": true},
        "threshold": {"type": "number", "default": 0.5}
    }
});

let options = UiOptions::default()
    .with_auto_validate(true)
    .with_float_step(0.05);

// Create frontend with custom options
let frontend = TuiFrontend {
    options: options.clone(),
    tui_artifacts: None,  // Or provide precompiled TuiArtifacts
};

let result = SchemaUI::new(schema)
    .with_options(options)
    .run_with_frontend(frontend)?;
```

--------------------------------

### Handle Help Overlay Input

Source: https://github.com/yuniqueunic/schemaui/blob/main/docs/en/tui-architecture-overview.md

Logic for processing keyboard events within the help overlay context.

```rust
fn handle_key(&mut self, key: KeyEvent) -> Result<()> {
    if key.kind != KeyEventKind::Press { return Ok(()); }

    if self.handle_help_overlay_key(&key) { return Ok(()); }
    if self.handle_popup_key(key)? { return Ok(()); }
    // then overlay / main page handling
}

fn handle_help_overlay_key(&mut self, key: &KeyEvent) -> bool {
    let Some(state) = self.help_overlay.as_mut() else { return false; };
    match key.code {
        KeyCode::Esc => { self.help_overlay = None; true }
        KeyCode::Tab => { /* next page */ true }
        KeyCode::BackTab => { /* previous page */ true }
        _ => false,
    }
}
```

--------------------------------

### Define UiStores structure

Source: https://github.com/yuniqueunic/schemaui/blob/main/docs/en/tui-architecture-overview.md

Tracks focus state across different UI components within the main page.

```rust
pub struct UiStores {
    pub root: RootTabsStore,
    pub sections: SectionTabsStore,
    pub fields: FieldListStore,
}
```

--------------------------------

### Get the computed style of an element

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Retrieves the `CSSStyleDeclaration` object for an element. This function ensures it operates correctly within browser environments.

```javascript
function So(e){
  return Y(e).getComputedStyle(e)
}
```

--------------------------------

### Handle Portal Mount (React)

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

This snippet demonstrates the internal logic for handling portals. It ensures that the container information for the portal is correctly set up. Use this for understanding how React manages DOM nodes outside the typical parent-child hierarchy.

```javascript
case 4:return ue(),e===null&&xd(t.stateNode.containerInfo),Mc(t),null;
```

--------------------------------

### Get Current Priority Level

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Returns the current priority level of the task being executed. This is useful for understanding the context in which a callback is running.

```javascript
e.unstable_getCurrentPriorityLevel = function(){return f}
```

--------------------------------

### Prism Core Implementation

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

The primary logic for tokenizing, highlighting, and managing the Prism lifecycle.

```javascript
run(`after-highlight`,c),i.hooks.run(`complete`,c),r&&r.call(c.element)}if(i.hooks.run(`before-sanity-check`,c),s=c.element.parentElement,s&&s.nodeName.toLowerCase()===`pre`&&!s.hasAttribute(`tabindex`)&&s.setAttribute(`tabindex`,`0`),!c.code){i.hooks.run(`complete`,c),r&&r.call(c.element);return}if(i.hooks.run(`before-highlight`,c),!c.grammar){l(i.util.encode(c.code));return}if(n&&e.Worker){var u=new Worker(i.filename);u.onmessage=function(e){l(e.data)},u.postMessage(JSON.stringify({language:c.language,code:c.code,immediateClose:!0}))}else l(i.highlight(c.code,c.grammar,c.language))},highlight:function(e,t,n){var r={code:e,grammar:t,language:n};if(i.hooks.run(`before-tokenize`,r),!r.grammar)throw Error(`The language "`+r.language+`" has no grammar.`);return r.tokens=i.tokenize(r.code,r.grammar),i.hooks.run(`after-tokenize`,r),a.stringify(i.util.encode(r.tokens),r.language)},tokenize:function(e,t){var n=t.rest;if(n){for(var r in n)t[r]=n[r];delete t.rest}var i=new c;return l(i,i.head,e),s(e,i,t,i.head,0),d(i)},hooks:{all:{},add:function(e,t){var n=i.hooks.all;n[e]=n[e]||[],n[e].push(t)},run:function(e,t){var n=i.hooks.all[e];if(!(!n||!n.length))for(var r=0,a;a=n[r++];)a(t)}},Token:a};e.Prism=i;function a(e,t,n,r){this.type=e,this.content=t,this.alias=n,this.length=(r||``).length|0}a.stringify=function e(t,n){if(typeof t==`string`)return t;if(Array.isArray(t)){var r=``;return t.forEach(function(t){r+=e(t,n)}),r}var a={type:t.type,content:e(t.content,n),tag:`span`,classes:[`token`,t.type],attributes:{},language:n},o=t.alias;o&&(Array.isArray(o)?Array.prototype.push.apply(a.classes,o):a.classes.push(o)),i.hooks.run(`wrap`,a);var s=``;for(var c in a.attributes)s+=` `+c+`="`+(a.attributes[c]||``).replace(/"/g,`&quot;`)+`"`;return`<`+a.tag+` class="`+a.classes.join(` `)+`"`+s+`>`+a.content+`</`+a.tag+`>`};function o(e,t,n,r){e.lastIndex=t;var i=e.exec(n);if(i&&r&&i[1]){var a=i[1].length;i.index+=a,i[0]=i[0].slice(a)}return i}function s(e,t,n,r,c,d){for(var f in n)if(!(!n.hasOwnProperty(f)||!n[f])){var p=n[f];p=Array.isArray(p)?p:[p];for(var m=0;m<p.length;++m){if(d&&d.cause==f+`,`+m)return;var h=p[m],g=h.inside,_=!!h.lookbehind,v=!!h.greedy,y=h.alias;if(v&&!h.pattern.global){var b=h.pattern.toString().match(/[imsuy]*$/)[0];h.pattern=RegExp(h.pattern.source,b+`g`)}for(var x=h.pattern||h,S=r.next,C=c;S!==t.tail&&!(d&&C>=d.reach);C+=S.value.length,S=S.next){var w=S.value;if(t.length>e.length)return;if(!(w instanceof a)){var T=1,E;if(v){if(E=o(x,C,e,_),!E||E.index>=e.length)break;var ee=E.index,D=E.index+E[0].length,O=C;for(O+=S.value.length;ee>=O;)S=S.next,O+=S.value.length;if(O-=S.value.length,C=O,S.value instanceof a)continue;for(var k=S;k!==t.tail&&(O<D||typeof k.value==`string`);k=k.next)T++,O+=k.value.length;T--,w=e.slice(C,O),E.index-=C}else if(E=o(x,0,w,_),!E)continue;var ee=E.index,A=E[0],j=w.slice(0,ee),M=w.slice(ee+A.length),N=C+w.length;d&&N>d.reach&&(d.reach=N);var te=S.prev;j&&(te=l(t,te,j),C+=j.length),u(t,te,T);var P=new a(f,g?i.tokenize(A,g):A,y,A);if(S=l(t,te,P),M&&l(t,S,M),T>1){var F={cause:f+`,`+m,reach:N};s(e,t,n,S.prev,C,F),d&&F.reach>d.reach&&(d.reach=F.reach)}}}}}}function c(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function l(e,t,n){var r=t.next,i={value:n,prev:t,next:r};return t.next=i,r.prev=i,e.length++,i}function u(e,t,n){for(var r=t.next,i=0;i<n&&r!==e.tail;i++)r=r.next;t.next=r,r.prev=t,e.length-=i}function d(e){for(var t=[],n=e.head.next;n!==e.tail;)t.push(n.value),n=n.next;return t}if(!e.document)return e.addEventListener&&(i.disableWorkerMessageHandler||e.addEventListener(`message`,function(t){var n=JSON.parse(t.data),r=n.language,a=n.code,o=n.immediateClose;e.postMessage(i.highlight(a,i.languages[r],r)),o&&e.close()},!1)),i;var f=i.util.currentScript();f&&(i.filename=f.src,f.hasAttribute(`data-manual`)&&(i.manual=!0));function p(){i.manual||i.highlightAll()}if(!i.manual){var m=document.readyState;m===`loading`||m===`interactive`&&f&&f.defer?document.addEventListener(`DOMContentLoaded`,p):window.requestAnimationFrame?window.requestAnimationFrame(p):window.setTimeout(p,16)}return i}(typeof window<`u`?window:typeof WorkerGlobalScope<`u`&&self instanceof WorkerGlobalScope?self:{});t!==void 0&&t.exports&&(t.exports=n),typeof global<`u`&&(global.Prism=n),n.languages.markup={comment:{pattern:/\x3C!--(?:(?!\x3C!--)[\s\S])*?-->/,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|\x3C!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[\[\]]/,"doctype-ta
```

--------------------------------

### Get Offset Parent

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Finds the offset parent of an element, which is the nearest ancestor that is positioned or the `<body>` element. Used for relative positioning calculations.

```javascript
function Xo(e,t){if(!co(e)||So(e).position===\`fixed\`)return null;if(t)return t(e);let n=e.offsetParent;return ao(e)===n&&(n=n.ownerDocument.body),n}
```

```javascript
function Zo(e,t){let n=Y(e);if(po(e))return n;if(!co(e)){let t=wo(e);for(;t&&!xo(t);){if(so(t)&&!Yo(t))return t;t=wo(t)}return n}let r=Xo(e,t);for(;r&&fo(r)&&Yo(r);)r=Xo(r,t);return r&&xo(r)&&Yo(r)&&!vo(r)?n:r||yo(e)||n}
```

--------------------------------

### Get Active Element in Document

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Safely retrieves the currently active element in the document. Returns null if the document is not available or an error occurs.

```javascript
function Pt(e){if(e||=typeof document<`u`?document:void 0,e===void 0)return null;try{return e.activeElement||e.body}catch{return e.body}}
```

--------------------------------

### Define KeymapContext Enumeration

Source: https://github.com/yuniqueunic/schemaui/blob/main/docs/en/tui-architecture-overview.md

Defines semantic groups for help text, influencing footer help and overlay content based on focus.

```rust
pub enum KeymapContext {
    Default,
    Collection,
    Overlay,
    Help,
    TextInput,
    NumericInput,
}
```

--------------------------------

### Get Frame Document Object

Source: https://github.com/yuniqueunic/schemaui/blob/main/tests/web-ui/automated-ui-tests.html

Safely retrieves the document object of the test frame. Handles potential cross-origin access errors by logging them.

```javascript
getFrameDocument() {
  try {
    return this.testFrame.contentDocument || this.testFrame.contentWindow.document;
  } catch (e) {
    this.log(
      `Cannot access frame: ${e.message}`,
      "error",
    );
    return null;
  }
}

```

--------------------------------

### React Selection State Handling

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Handles the selection state of input elements, specifically for 'input' and 'textarea' elements. It captures the start and end of the selection.

```javascript
function el(e,t){if(e=e.containerInfo,Rd=sp,e=xr(e),Sr(e)){if(`selectionStart`in e)var n={start:e.selectionStart,end:e.selectionEnd}}
```

--------------------------------

### Initialize Resource Tracker

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Initializes a resource tracking object with a controller, data map, and reference count.

```javascript
function ea(){return{controller:new Xi,data:new Map,refCount:0}}
```

--------------------------------

### Get Viewport Rect

Source: https://github.com/yuniqueunic/schemaui/blob/main/web/dist/index.html

Calculates the dimensions and position of the viewport, considering the visual viewport for mobile devices. Used for positioning elements relative to the screen.

```javascript
function Vo(e,t){let n=Y(e),r=ao(e),i=n.visualViewport,a=r.clientWidth,o=r.clientHeight,s=0,c=0;if(i){a=i.width,o=i.height;let e=bo();(!e||e&&t===\`fixed\])&&(s=i.offsetLeft,c=i.offsetTop)}let l=Fo(r);if(l<=0){let e=r.ownerDocument,t=e.body,n=getComputedStyle(t),i=e.compatMode===\`CSS1Compat\`&&parseFloat(n.marginLeft)+parseFloat(n.marginRight)||0,o=Math.abs(r.clientWidth-t.clientWidth-i);o<=Bo&&(a-=o)}else l<=Bo&&(a+=l);return{width:a,height:o,x:s,y:c}}
```

--------------------------------

### Build and Run TUI with SchemaUI

Source: https://context7.com/yuniqueunic/schemaui/llms.txt

Use the SchemaUI builder to define a schema, set UI options, and run the interactive TUI session. The result is serialized to a pretty-printed JSON string.

```rust
use schemaui::prelude::*;
use serde_json::json;

fn main() -> color_eyre::Result<()> {
    color_eyre::install()?;

    // Define a JSON Schema for configuration
    let schema = json!({
        "$schema": "http://json-schema.org/draft-07/schema#",
        "title": "Service Config",
        "type": "object",
        "required": ["host", "port"],
        "properties": {
            "host": {
                "type": "string",
                "description": "Server listening address",
                "default": "127.0.0.1"
            },
            "port": {
                "type": "integer",
                "description": "Server port",
                "minimum": 1024,
                "maximum": 65535,
                "default": 8080
            },
            "log": {
                "type": "object",
                "properties": {
                    "level": {
                        "type": "string",
                        "enum": ["trace", "debug", "info", "warn", "error"],
                        "default": "info"
                    }
                }
            },
            "features": {
                "type": "array",
                "items": { "type": "string" }
            },
            "public": {
                "type": "boolean",
                "default": false
            }
        }
    });

    // Build and run the TUI
    let options = UiOptions::default();
    let result = SchemaUI::new(schema)
        .with_title("Service Configuration")
        .with_options(options)
        .run()?;

    println!("{}", serde_json::to_string_pretty(&result)?);
    Ok(())
}
```