Something went wrong. Try again.
Monorepo for the nibling.run platform
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899<!doctype html><html lang="en"> <head> <meta charset="utf-8" /> <title>nib-split fixture</title> <style> html, body { height: 100%; margin: 0; } body { display: flex; flex-direction: column; background: var(--nib-color-canvas); color: var(--nib-color-text); font: var(--nib-font-ui); } nib-split#outer { flex: 1; min-height: 0; } nib-panel { background: var(--nib-color-surface); border: var(--nib-size-border) solid var(--nib-color-border); } /* Only the leaf panels show a centered label; #middle holds a nested split and must let the component's own flex/stretch size that split (see src/split/element.ts). */ #left, #top, #bottom, #right { display: flex; align-items: center; justify-content: center; } #log { margin: 0; padding: var(--nib-space-xs) var(--nib-space-sm); border-top: var(--nib-size-border) solid var(--nib-color-border); } </style> </head> <body> <nib-split id="outer"></nib-split> <p id="log" aria-live="polite"></p> <script type="module"> // A <link> to a path outside the fixtures root 404s under this dev server; importing from // a module resolves correctly through Vite's module graph, same as the element import below. import "../src/tokens/tokens.css"; import "../src/split/element.ts";
const log = document.getElementById("log"); const report = (event) => { if (!event.committed) return; log.textContent = event.sizes.map((s) => Math.round(s * 100)).join(", "); };
const outer = document.getElementById("outer"); outer.axis = "row"; outer.addEventListener("resize", report);
const left = document.createElement("nib-panel"); left.id = "left"; left.label = "Explorer"; left.textContent = "Explorer";
const middle = document.createElement("nib-panel"); middle.id = "middle"; middle.label = "Editor";
const inner = document.createElement("nib-split"); inner.id = "inner"; inner.axis = "column"; inner.addEventListener("resize", report);
const top = document.createElement("nib-panel"); top.id = "top"; top.label = "Preview"; top.textContent = "Preview";
const bottom = document.createElement("nib-panel"); bottom.id = "bottom"; bottom.label = "Terminal"; bottom.textContent = "Terminal";
inner.append(top, bottom); middle.append(inner);
const right = document.createElement("nib-panel"); right.id = "right"; right.label = "Output"; right.textContent = "Output";
outer.append(left, middle, right); </script> </body></html>