@honua/app-platform 0.0.20-alpha.0

package/web-components/elements.js

@@ -0,0 +1,1651 @@
+import { createHonuaWebComponentController } from "./controller.js";
+import { HonuaMapLibreRenderer } from "./maplibre-renderer.js";
+const globalDom = globalThis;
+const HTMLElementBase = globalDom.HTMLElement ?? class {
+};
+class HonuaElementBase extends HTMLElementBase {
+    #controller;
+    #unsubscribe;
+    #controllerReadyListener;
+    state;
+    get controller() {
+        return this.#controller;
+    }
+    set controller(controller) {
+        if (this.#controller === controller)
+            return;
+        this.#unsubscribe?.remove();
+        this.#unsubscribe = undefined;
+        this.#controller = controller;
+        this.state = controller?.getState();
+        if (controller) {
+            this.#unsubscribe = controller.subscribe((state) => {
+                this.state = state;
+                this.stateChanged(state);
+                this.render();
+            });
+        }
+        this.controllerChanged(controller);
+        this.render();
+    }
+    connectedCallback() {
+        this.ensureShadowRoot();
+        this.listenForControllerReady();
+        this.resolveControllerFromContext();
+        this.render();
+    }
+    disconnectedCallback() {
+        this.#unsubscribe?.remove();
+        this.#unsubscribe = undefined;
+        if (this.#controllerReadyListener) {
+            this.getRootEventTarget()?.removeEventListener("honua-controller-ready", this.#controllerReadyListener);
+            this.#controllerReadyListener = undefined;
+        }
+    }
+    controllerChanged(_controller) { }
+    stateChanged(_state) { }
+    ensureShadowRoot() {
+        if (!this.shadowRoot && typeof this.attachShadow === "function") {
+            this.attachShadow({ mode: "open" });
+        }
+    }
+    setShadowHtml(html) {
+        this.ensureShadowRoot();
+        const root = this.shadowRoot ?? this;
+        const focus = captureFocus(root);
+        root.innerHTML = html;
+        restoreFocus(root, focus);
+    }
+    resolveControllerFromContext() {
+        if (this.controller)
+            return;
+        const mapId = this.getAttribute("for");
+        const root = this.getRootNode?.();
+        const map = mapId
+            ? getElementById(root, mapId)
+            : typeof root?.querySelector === "function"
+                ? root.querySelector("honua-map")
+                : undefined;
+        const controller = map?.controller;
+        if (controller)
+            this.controller = controller;
+    }
+    listenForControllerReady() {
+        if (this.#controllerReadyListener)
+            return;
+        const target = this.getRootEventTarget();
+        if (!target)
+            return;
+        this.#controllerReadyListener = (event) => {
+            const detail = event.detail;
+            if (!detail?.controller)
+                return;
+            const mapId = this.getAttribute("for");
+            if (mapId && event.target?.id !== mapId)
+                return;
+            if (!mapId && this.controller)
+                return;
+            this.controller = detail.controller;
+        };
+        target.addEventListener("honua-controller-ready", this.#controllerReadyListener);
+    }
+    dispatchTypedEvent(name, detail) {
+        if (!globalDom.CustomEvent || typeof this.dispatchEvent !== "function")
+            return;
+        this.dispatchEvent(new globalDom.CustomEvent(name, { bubbles: true, composed: true, detail }));
+    }
+    getRootEventTarget() {
+        const root = this.getRootNode?.();
+        if (root && "addEventListener" in root)
+            return root;
+        return typeof document !== "undefined" ? document : undefined;
+    }
+}
+export class HonuaMapElement extends HonuaElementBase {
+    static get observedAttributes() {
+        return ["map-package", "package-url", "src", "label"];
+    }
+    #options = {};
+    #client;
+    #packageUrl;
+    #renderer;
+    #packageLoadToken = 0;
+    #packageLoading = false;
+    #packageLoadError;
+    get map() {
+        return this.#renderer?.map;
+    }
+    get runtime() {
+        return this.#renderer?.runtime;
+    }
+    get client() {
+        return this.#client;
+    }
+    set client(client) {
+        this.#client = client;
+        void this.syncRenderer();
+    }
+    get packageUrl() {
+        return this.#packageUrl;
+    }
+    set packageUrl(value) {
+        this.#packageUrl = value?.trim() || undefined;
+        this.#packageLoadError = undefined;
+        this.#packageLoading = Boolean(this.#packageUrl);
+        this.render();
+        if (this.#packageUrl)
+            void this.loadPackageFromUrl(this.#packageUrl);
+    }
+    get mapPackage() {
+        return this.#options.mapPackage;
+    }
+    set mapPackage(mapPackage) {
+        this.#options = { ...this.#options, ...(mapPackage ? { mapPackage } : { mapPackage: undefined }) };
+        if (mapPackage) {
+            this.#packageLoading = false;
+            this.#packageLoadError = undefined;
+        }
+        if (mapPackage) {
+            this.controller = createHonuaWebComponentController(this.#options);
+        }
+        else if (!this.controller) {
+            this.ensureController();
+        }
+        void this.syncRenderer();
+        this.render();
+    }
+    get featuresBySource() {
+        return this.#options.featuresBySource;
+    }
+    set featuresBySource(featuresBySource) {
+        this.#options = {
+            ...this.#options,
+            ...(featuresBySource ? { featuresBySource } : { featuresBySource: undefined }),
+        };
+        if (this.controller?.updateFeatures && featuresBySource) {
+            for (const [sourceId, features] of Object.entries(featuresBySource)) {
+                this.controller.updateFeatures(sourceId, features);
+            }
+        }
+        else if (!this.controller) {
+            this.ensureController();
+        }
+        this.render();
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        if (name === "map-package" && newValue) {
+            try {
+                this.mapPackage = JSON.parse(newValue);
+            }
+            catch {
+                this.#packageLoading = false;
+                this.#packageLoadError = "Invalid map-package JSON.";
+                this.dispatchTypedEvent("honua-map-error", {
+                    error: new Error("Invalid map-package JSON."),
+                    message: "Invalid map-package JSON.",
+                });
+            }
+        }
+        if ((name === "package-url" || name === "src") && newValue !== null) {
+            this.packageUrl = newValue;
+        }
+        this.render();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.ensureController();
+        if (this.#packageUrl && !this.state?.mapPackage)
+            void this.loadPackageFromUrl(this.#packageUrl);
+        void this.syncRenderer();
+    }
+    disconnectedCallback() {
+        this.#packageLoadToken += 1;
+        this.#renderer?.disconnect();
+        this.#renderer = undefined;
+        super.disconnectedCallback();
+    }
+    controllerChanged(controller) {
+        if (controller) {
+            this.dispatchTypedEvent("honua-controller-ready", { controller });
+        }
+        void this.syncRenderer();
+    }
+    stateChanged(state) {
+        void this.#renderer?.applyState(state);
+    }
+    render() {
+        const state = this.state ?? this.controller?.getState();
+        const layers = state?.layers ?? [];
+        const viewport = state?.viewport ?? {};
+        const visibleLayers = layers.filter((layer) => layer.visible);
+        const label = this.getAttribute("label") ?? state?.mapPackage?.mapPackageId ?? "Honua map";
+        const root = this.shadowRoot ?? this;
+        if (!root.querySelector?.(".map")) {
+            this.setShadowHtml(`
+        <style>${baseStyles()}${mapStyles()}</style>
+        <section part="map" class="map" role="region" aria-label="${escapeHtml(label)}" tabindex="0">
+          <div class="map__chrome">
+            <div class="map__title"></div>
+            <div class="map__controls" aria-label="Map controls">
+              <button type="button" class="icon-button" data-zoom="out" aria-label="Zoom out">-</button>
+              <output class="zoom" aria-label="Zoom">0</output>
+              <button type="button" class="icon-button" data-zoom="in" aria-label="Zoom in">+</button>
+            </div>
+          </div>
+          <div class="map__canvas" part="canvas">
+            <div class="map__renderer" part="renderer"></div>
+            <div class="map__status" aria-live="polite"></div>
+          </div>
+          <div class="map__footer">
+            <span data-visible-layers>0 visible</span>
+            <span data-center>No center</span>
+          </div>
+        </section>
+      `);
+            this.bindMapChrome();
+        }
+        const nextRoot = this.shadowRoot ?? this;
+        nextRoot.querySelector(".map")?.setAttribute("aria-label", label);
+        setText(nextRoot.querySelector(".map__title"), label);
+        setText(nextRoot.querySelector(".zoom"), String(viewport.zoom?.toFixed?.(1) ?? viewport.zoom ?? 0));
+        setText(nextRoot.querySelector("[data-visible-layers]"), `${String(visibleLayers.length)} visible`);
+        setText(nextRoot.querySelector("[data-center]"), viewport.center ? viewport.center.join(", ") : "No center");
+        setText(nextRoot.querySelector(".map__status"), this.mapStatusText(state));
+        void this.syncRenderer();
+    }
+    ensureController() {
+        if (this.controller)
+            return;
+        this.controller = createHonuaWebComponentController(this.#options);
+    }
+    bindMapChrome() {
+        this.shadowRoot?.querySelectorAll("[data-zoom]").forEach((button) => {
+            button.addEventListener("click", () => {
+                const direction = button.dataset.zoom === "in" ? 1 : -1;
+                const nextZoom = (this.controller?.getState().viewport.zoom ?? 0) + direction;
+                this.controller?.setViewport({ zoom: nextZoom });
+                this.dispatchTypedEvent("honua-viewport-change", { zoom: nextZoom });
+            });
+        });
+    }
+    async syncRenderer() {
+        if (!this.isConnected || !this.controller)
+            return;
+        const container = this.shadowRoot?.querySelector(".map__renderer");
+        if (!container)
+            return;
+        if (!this.#renderer) {
+            this.#renderer = new HonuaMapLibreRenderer({
+                container,
+                getClient: () => this.#client,
+                getController: () => this.controller,
+                onReady: (detail) => {
+                    this.dispatchTypedEvent("honua-map-ready", detail);
+                    this.render();
+                },
+                onError: (detail) => {
+                    this.dispatchTypedEvent("honua-map-error", detail);
+                    setText(this.shadowRoot?.querySelector(".map__status"), detail.message);
+                },
+                onViewport: (detail) => {
+                    this.dispatchTypedEvent("honua-viewport-change", detail);
+                    this.render();
+                },
+                onClick: (detail) => this.dispatchTypedEvent("honua-map-click", detail),
+                onHover: (detail) => this.dispatchTypedEvent("honua-map-hover", detail),
+                onSelection: (detail) => this.dispatchTypedEvent("honua-selection-change", detail),
+            });
+        }
+        const state = this.controller.getState();
+        this.state = state;
+        await this.#renderer.applyState(state);
+    }
+    async loadPackageFromUrl(locator) {
+        const token = ++this.#packageLoadToken;
+        this.#packageLoading = true;
+        this.#packageLoadError = undefined;
+        this.render();
+        try {
+            const [{ fetchMapPackage }, { HonuaClient }] = await Promise.all([
+                import("../runtime/index.js"),
+                import("../core/client.js"),
+            ]);
+            if (token !== this.#packageLoadToken)
+                return;
+            const client = this.#client ?? new HonuaClient({ baseUrl: browserOrigin() });
+            const result = await fetchMapPackage(locator, {
+                client,
+                requireStyleRefResolution: false,
+                allowInvalid: false,
+            });
+            if (token !== this.#packageLoadToken)
+                return;
+            this.mapPackage = result.mapPackage;
+            this.#packageLoading = false;
+            this.#packageLoadError = undefined;
+            await this.syncRenderer();
+            this.render();
+        }
+        catch (error) {
+            if (token !== this.#packageLoadToken)
+                return;
+            this.#packageLoading = false;
+            this.#packageLoadError = error instanceof Error ? error.message : String(error);
+            this.dispatchTypedEvent("honua-map-error", {
+                error,
+                message: this.#packageLoadError,
+            });
+            this.render();
+        }
+    }
+    mapStatusText(state) {
+        if (this.#packageLoadError)
+            return this.#packageLoadError;
+        if (state?.mapPackage)
+            return "";
+        if (this.#packageLoading || this.#packageUrl)
+            return "Loading map package";
+        return "No map package";
+    }
+}
+export class HonuaLayerListElement extends HonuaElementBase {
+    static get observedAttributes() {
+        return ["for", "label"];
+    }
+    attributeChangedCallback() {
+        this.resolveControllerFromContext();
+        this.render();
+    }
+    render() {
+        const layers = this.state?.layers ?? [];
+        const label = this.getAttribute("label") ?? "Layers";
+        this.setShadowHtml(`
+      <style>${baseStyles()}${listStyles()}</style>
+      <fieldset class="panel" part="panel">
+        <legend>${escapeHtml(label)}</legend>
+        <div class="stack" role="list">
+          ${layers.length === 0
+            ? `<p class="empty">No layers</p>`
+            : layers
+                .map((layer) => `
+            <label class="check-row" role="listitem">
+              <input type="checkbox" data-layer-id="${escapeHtml(layer.id)}" ${layer.visible ? "checked" : ""} />
+              <span>${escapeHtml(layer.title)}</span>
+            </label>
+          `)
+                .join("")}
+        </div>
+      </fieldset>
+    `);
+        this.shadowRoot?.querySelectorAll("input[data-layer-id]").forEach((input) => {
+            input.addEventListener("change", () => {
+                const layerId = input.dataset.layerId;
+                if (!layerId)
+                    return;
+                this.controller?.setLayerVisibility(layerId, input.checked);
+                this.dispatchTypedEvent("honua-layer-visibility-change", {
+                    layerId,
+                    visible: input.checked,
+                });
+            });
+        });
+    }
+}
+export class HonuaLegendElement extends HonuaElementBase {
+    static get observedAttributes() {
+        return ["for", "label"];
+    }
+    attributeChangedCallback() {
+        this.resolveControllerFromContext();
+        this.render();
+    }
+    render() {
+        const legend = this.state?.legend ?? [];
+        const label = this.getAttribute("label") ?? "Legend";
+        this.setShadowHtml(`
+      <style>${baseStyles()}${listStyles()}</style>
+      <section class="panel" part="panel" aria-label="${escapeHtml(label)}">
+        <h2>${escapeHtml(label)}</h2>
+        <ul class="legend">
+          ${legend.length === 0
+            ? `<li class="empty">No legend</li>`
+            : legend
+                .map((item) => `
+            <li>
+              ${item.iconUrl
+                ? `<img class="swatch" alt="" src="${escapeAttribute(item.iconUrl)}" />`
+                : `<span class="swatch" style="--swatch:${escapeAttribute(item.color ?? "#64748b")}"></span>`}
+              <span>${escapeHtml(item.label)}</span>
+            </li>
+          `)
+                .join("")}
+        </ul>
+      </section>
+    `);
+    }
+}
+export class HonuaFeatureTableElement extends HonuaElementBase {
+    static get observedAttributes() {
+        return ["for", "source", "fields", "page-size", "filter-text", "label"];
+    }
+    #model;
+    #refreshToken = 0;
+    attributeChangedCallback(name, _oldValue, newValue) {
+        this.resolveControllerFromContext();
+        if (name === "filter-text") {
+            const detail = {
+                sourceId: this.sourceId(),
+                text: newValue ?? "",
+            };
+            this.controller?.setFilter(detail);
+            this.dispatchTypedEvent("honua-filter-change", detail);
+        }
+        void this.refresh();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        void this.refresh();
+    }
+    stateChanged() {
+        void this.refresh();
+    }
+    async refresh() {
+        const controller = this.controller;
+        if (!controller)
+            return undefined;
+        const token = ++this.#refreshToken;
+        const model = await controller.queryFeatures(this.sourceId(), {
+            fields: this.fields(),
+            pagination: { limit: this.pageSize() },
+        });
+        if (token !== this.#refreshToken)
+            return this.#model;
+        this.#model = model;
+        this.render();
+        return model;
+    }
+    render() {
+        const state = this.state;
+        const model = this.#model ?? tableModelFromState(state, this.sourceId(), this.fields(), this.pageSize());
+        const selectedId = state?.selection?.featureId;
+        const label = this.getAttribute("label") ?? "Features";
+        this.setShadowHtml(`
+      <style>${baseStyles()}${tableStyles()}</style>
+      <section class="table-panel" part="panel" aria-label="${escapeHtml(label)}">
+        <div class="table-panel__bar">
+          <h2>${escapeHtml(label)}</h2>
+          <span>${escapeHtml(String(model.totalCount))}</span>
+        </div>
+        <div class="table-wrap">
+          <table role="grid" aria-rowcount="${escapeHtml(String(model.rows.length))}">
+            <thead>
+              <tr>${model.fields.map((field) => `<th scope="col">${escapeHtml(field)}</th>`).join("")}</tr>
+            </thead>
+            <tbody>
+              ${model.rows.length === 0
+            ? `<tr><td colspan="${Math.max(1, model.fields.length)}" class="empty">No rows</td></tr>`
+            : model.rows
+                .map((row) => `
+                <tr tabindex="0" data-source-id="${escapeHtml(row.sourceId)}" data-feature-id="${escapeHtml(String(row.id))}" aria-selected="${String(String(selectedId ?? "") === String(row.id))}">
+                  ${model.fields.map((field) => `<td>${escapeHtml(formatCell(row.attributes[field]))}</td>`).join("")}
+                </tr>
+              `)
+                .join("")}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    `);
+        this.shadowRoot?.querySelectorAll("tbody tr[data-feature-id]").forEach((row) => {
+            const select = () => this.selectRow(row);
+            row.addEventListener("click", select);
+            row.addEventListener("keydown", (event) => {
+                if (event.key !== "Enter" && event.key !== " ")
+                    return;
+                event.preventDefault();
+                select();
+            });
+        });
+    }
+    selectRow(row) {
+        const sourceId = row.dataset.sourceId;
+        const featureId = row.dataset.featureId;
+        if (!sourceId || featureId === undefined)
+            return;
+        const feature = (this.#model?.rows ?? []).find((candidate) => String(candidate.id) === featureId);
+        this.controller?.selectFeature({ sourceId, featureId, ...(feature ? { feature } : {}) });
+        this.dispatchTypedEvent("honua-selection-change", {
+            sourceId,
+            featureId,
+            ...(feature ? { feature } : {}),
+        });
+    }
+    sourceId() {
+        return this.getAttribute("source") ?? undefined;
+    }
+    fields() {
+        const value = this.getAttribute("fields");
+        return value
+            ?.split(",")
+            .map((field) => field.trim())
+            .filter(Boolean);
+    }
+    pageSize() {
+        const parsed = Number(this.getAttribute("page-size"));
+        return Number.isFinite(parsed) && parsed > 0 ? parsed : undefined;
+    }
+}
+export class HonuaSearchElement extends HonuaElementBase {
+    static get observedAttributes() {
+        return ["for", "source", "placeholder", "label"];
+    }
+    #query = "";
+    #results = [];
+    attributeChangedCallback() {
+        this.resolveControllerFromContext();
+        this.render();
+    }
+    render() {
+        const label = this.getAttribute("label") ?? "Search";
+        const placeholder = this.getAttribute("placeholder") ?? "Search";
+        this.setShadowHtml(`
+      <style>${baseStyles()}${searchStyles()}</style>
+      <section class="search" part="panel" aria-label="${escapeHtml(label)}">
+        <form>
+          <label class="sr-only" for="honua-search-input">${escapeHtml(label)}</label>
+          <input id="honua-search-input" name="q" value="${escapeAttribute(this.#query)}" placeholder="${escapeAttribute(placeholder)}" autocomplete="off" />
+          <button type="submit">Search</button>
+        </form>
+        <ul class="results" aria-live="polite">
+          ${this.#results.map((result) => `<li><button type="button" data-result-id="${escapeHtml(result.id)}">${escapeHtml(result.label)}</button></li>`).join("")}
+        </ul>
+      </section>
+    `);
+        this.shadowRoot?.querySelector("form")?.addEventListener("submit", (event) => {
+            event.preventDefault();
+            const input = this.shadowRoot?.querySelector("input[name='q']");
+            void this.runSearch(input?.value ?? "");
+        });
+        this.shadowRoot?.querySelectorAll("button[data-result-id]").forEach((button) => {
+            button.addEventListener("click", () => {
+                const result = this.#results.find((candidate) => candidate.id === button.dataset.resultId);
+                if (!result?.featureId || !result.sourceId)
+                    return;
+                this.controller?.selectFeature({
+                    sourceId: result.sourceId,
+                    featureId: result.featureId,
+                    ...(result.feature ? { feature: result.feature } : {}),
+                });
+                this.dispatchTypedEvent("honua-selection-change", {
+                    sourceId: result.sourceId,
+                    featureId: result.featureId,
+                    ...(result.feature ? { feature: result.feature } : {}),
+                });
+            });
+        });
+    }
+    async runSearch(query) {
+        this.#query = query;
+        const sourceId = this.getAttribute("source") ?? undefined;
+        this.#results = await (this.controller?.search(query, { sourceId }) ?? []);
+        this.dispatchTypedEvent("honua-search", { query, results: this.#results });
+        this.render();
+    }
+}
+export class HonuaEditorElement extends HonuaElementBase {
+    static get observedAttributes() {
+        return ["for", "source", "label"];
+    }
+    #model;
+    get editorModel() {
+        return this.#model ?? this.state?.editor;
+    }
+    set editorModel(model) {
+        this.#model = model;
+        this.render();
+    }
+    attributeChangedCallback() {
+        this.resolveControllerFromContext();
+        this.render();
+    }
+    render() {
+        const state = this.state;
+        const model = this.#model ?? state?.editor ?? defaultEditorModel(this.getAttribute("source") ?? undefined);
+        const selected = state?.selection?.feature;
+        const canUpdate = model.capabilities.canUpdate && !model.capabilities.readOnly;
+        const label = this.getAttribute("label") ?? "Editor";
+        this.setShadowHtml(`
+      <style>${baseStyles()}${editorStyles()}</style>
+      <section class="editor" part="panel" aria-label="${escapeHtml(label)}">
+        <div class="editor__bar">
+          <h2>${escapeHtml(label)}</h2>
+          <span data-status>${escapeHtml(model.status)}</span>
+        </div>
+        <p class="selection">${escapeHtml(selected?.title ?? "No selection")}</p>
+        <p class="muted">${escapeHtml(model.capabilities.readOnly ? (model.capabilities.reason ?? "Read-only") : "Editable")}</p>
+        <div class="editor__actions">
+          <button type="button" data-action="new" ${model.capabilities.canCreate && !model.capabilities.readOnly ? "" : "disabled"}>New</button>
+          <button type="button" data-action="save" ${canUpdate ? "" : "disabled"}>Save</button>
+          <button type="button" data-action="delete" ${model.capabilities.canDelete && !model.capabilities.readOnly ? "" : "disabled"}>Delete</button>
+        </div>
+      </section>
+    `);
+        this.shadowRoot?.querySelectorAll("button[data-action]").forEach((button) => {
+            button.addEventListener("click", () => {
+                void this.runEdit(button.dataset.action ?? "update", model);
+            });
+        });
+    }
+    async runEdit(action, model) {
+        const feature = this.state?.selection?.feature;
+        const sourceId = this.getAttribute("source") ?? model.sourceId ?? feature?.sourceId;
+        if (!feature || !sourceId)
+            return;
+        const operation = action === "new" ? "create" : action === "delete" ? "delete" : "update";
+        const request = { sourceId, feature, operation };
+        const next = await (this.controller?.applyEdit?.(request) ??
+            Promise.resolve({ ...model, status: "unsupported" }));
+        this.#model = next;
+        this.dispatchTypedEvent("honua-edit-change", {
+            status: next.status,
+            request,
+            model: next,
+        });
+        this.render();
+    }
+}
+export class HonuaChartElement extends HonuaElementBase {
+    static get observedAttributes() {
+        return ["for", "label"];
+    }
+    #model;
+    get chartModel() {
+        return this.#model ?? this.state?.chart;
+    }
+    set chartModel(model) {
+        this.#model = model;
+        this.render();
+    }
+    attributeChangedCallback() {
+        this.resolveControllerFromContext();
+        this.render();
+    }
+    render() {
+        const model = this.chartModel ?? defaultChartModel(this.getAttribute("label") ?? "Chart");
+        const max = Math.max(1, ...(model.data ?? []).map((datum) => datum.value));
+        this.setShadowHtml(`
+      <style>${baseStyles()}${chartStyles()}</style>
+      <section class="chart" part="panel" aria-label="${escapeHtml(model.title)}">
+        <h2>${escapeHtml(model.title)}</h2>
+        <div class="bars">
+          ${model.data?.length
+            ? model.data
+                .map((datum) => `
+            <div class="bar-row">
+              <span>${escapeHtml(datum.label)}</span>
+              <span class="bar" style="--bar:${(datum.value / max) * 100}%;--bar-color:${escapeAttribute(datum.color ?? "#2563eb")}"></span>
+              <strong>${escapeHtml(String(datum.value))}</strong>
+            </div>
+          `)
+                .join("")
+            : `<p class="empty">${escapeHtml(model.message ?? "No chart data")}</p>`}
+        </div>
+      </section>
+    `);
+    }
+}
+export class HonuaBasemapControlElement extends HonuaElementBase {
+    static get observedAttributes() {
+        return ["for", "label"];
+    }
+    #activeBasemapId;
+    attributeChangedCallback() {
+        this.resolveControllerFromContext();
+        this.render();
+    }
+    render() {
+        const label = this.getAttribute("label") ?? "Basemaps";
+        const basemaps = basemapsFromState(this.state);
+        const active = this.#activeBasemapId ?? basemaps.find((basemap) => basemap.visible)?.id ?? basemaps[0]?.id;
+        this.setShadowHtml(`
+      <style>${baseStyles()}${controlPanelStyles()}</style>
+      <section class="control-panel" part="panel" aria-label="${escapeHtml(label)}">
+        <div class="control-panel__bar">
+          <h2>${escapeHtml(label)}</h2>
+          <span>${escapeHtml(basemaps.length >= 2 ? "ready" : "unsupported")}</span>
+        </div>
+        ${basemaps.length < 2
+            ? `<p class="empty" role="status">At least two basemap layers are required.</p>`
+            : `<div class="segmented" role="group" aria-label="${escapeAttribute(label)}">
+              ${basemaps
+                .map((basemap) => `
+                <button type="button" data-basemap-id="${escapeAttribute(basemap.id)}" aria-pressed="${String(basemap.id === active)}">${escapeHtml(basemap.title)}</button>
+              `)
+                .join("")}
+            </div>`}
+      </section>
+    `);
+        this.shadowRoot?.querySelectorAll("button[data-basemap-id]").forEach((button) => {
+            button.addEventListener("click", () => this.selectBasemap(button.dataset.basemapId));
+        });
+    }
+    selectBasemap(basemapId) {
+        if (!basemapId)
+            return;
+        const previousBasemapId = this.#activeBasemapId;
+        this.#activeBasemapId = basemapId;
+        for (const basemap of basemapsFromState(this.state)) {
+            this.controller?.setLayerVisibility(basemap.id, basemap.id === basemapId);
+        }
+        this.dispatchTypedEvent("honua-basemap-change", {
+            basemapId,
+            ...(previousBasemapId ? { previousBasemapId } : {}),
+            status: "ready",
+        });
+        this.render();
+    }
+}
+export class HonuaBookmarksElement extends HonuaElementBase {
+    static get observedAttributes() {
+        return ["for", "label", "bookmarks"];
+    }
+    attributeChangedCallback() {
+        this.resolveControllerFromContext();
+        this.render();
+    }
+    render() {
+        const label = this.getAttribute("label") ?? "Bookmarks";
+        const bookmarks = this.bookmarks();
+        this.setShadowHtml(`
+      <style>${baseStyles()}${controlPanelStyles()}</style>
+      <section class="control-panel" part="panel" aria-label="${escapeHtml(label)}">
+        <div class="control-panel__bar">
+          <h2>${escapeHtml(label)}</h2>
+          <span>${escapeHtml(bookmarks.length > 0 ? "ready" : "unsupported")}</span>
+        </div>
+        ${bookmarks.length === 0
+            ? `<p class="empty" role="status">No initial view or bookmarks are available.</p>`
+            : `<div class="button-stack">
+              ${bookmarks
+                .map((bookmark) => `
+                <button type="button" data-bookmark-id="${escapeAttribute(bookmark.id)}">${escapeHtml(bookmark.label)}</button>
+              `)
+                .join("")}
+            </div>`}
+      </section>
+    `);
+        this.shadowRoot?.querySelectorAll("button[data-bookmark-id]").forEach((button) => {
+            button.addEventListener("click", () => {
+                const bookmark = this.bookmarks().find((candidate) => candidate.id === button.dataset.bookmarkId);
+                if (bookmark)
+                    this.goToBookmark(bookmark);
+            });
+        });
+    }
+    bookmarks() {
+        const configured = parseBookmarks(this.getAttribute("bookmarks"));
+        const home = this.state?.mapPackage?.initialView;
+        return [...(home ? [{ id: "home", label: "Home", viewport: home }] : []), ...configured];
+    }
+    goToBookmark(bookmark) {
+        this.controller?.setViewport(bookmark.viewport);
+        this.dispatchTypedEvent("honua-bookmark-change", {
+            ...bookmark,
+            status: "ready",
+        });
+        this.dispatchTypedEvent("honua-viewport-change", bookmark.viewport);
+    }
+}
+export class HonuaLocateControlElement extends HonuaElementBase {
+    static get observedAttributes() {
+        return ["for", "label", "latitude", "longitude", "zoom"];
+    }
+    #status = "idle";
+    #message = "";
+    attributeChangedCallback() {
+        this.resolveControllerFromContext();
+        this.render();
+    }
+    render() {
+        const label = this.getAttribute("label") ?? "Locate";
+        const supported = this.hasConfiguredLocation() || Boolean(globalThis.navigator?.geolocation);
+        const status = supported ? this.#status : "unsupported";
+        this.setShadowHtml(`
+      <style>${baseStyles()}${controlPanelStyles()}</style>
+      <section class="control-panel" part="panel" aria-label="${escapeHtml(label)}">
+        <div class="control-panel__bar">
+          <h2>${escapeHtml(label)}</h2>
+          <span>${escapeHtml(status)}</span>
+        </div>
+        <button type="button" data-locate ${supported ? "" : "disabled"}>Use location</button>
+        <p class="empty" role="status">${escapeHtml(supported ? this.#message || "Centers the shared map controller." : "Geolocation is unavailable.")}</p>
+      </section>
+    `);
+        this.shadowRoot?.querySelector("button[data-locate]")?.addEventListener("click", () => {
+            void this.locate();
+        });
+    }
+    async locate() {
+        const configured = this.configuredViewport();
+        if (configured) {
+            this.applyLocation(configured);
+            return;
+        }
+        const geolocation = globalThis.navigator?.geolocation;
+        if (!geolocation) {
+            this.#status = "unsupported";
+            this.#message = "Geolocation is unavailable.";
+            this.dispatchTypedEvent("honua-locate-change", {
+                status: "unsupported",
+                message: this.#message,
+            });
+            this.render();
+            return;
+        }
+        this.#status = "loading";
+        this.#message = "Requesting location.";
+        this.render();
+        geolocation.getCurrentPosition((position) => {
+            this.applyLocation({
+                center: [position.coords.longitude, position.coords.latitude],
+                zoom: this.zoom(),
+            });
+        }, (error) => {
+            this.#status = "error";
+            this.#message = error.message;
+            this.dispatchTypedEvent("honua-locate-change", {
+                status: "error",
+                error,
+                message: error.message,
+            });
+            this.render();
+        });
+    }
+    applyLocation(viewport) {
+        this.#status = "ready";
+        this.#message = "Location applied.";
+        this.controller?.setViewport(viewport);
+        this.dispatchTypedEvent("honua-locate-change", { status: "ready", viewport });
+        this.dispatchTypedEvent("honua-viewport-change", viewport);
+        this.render();
+    }
+    hasConfiguredLocation() {
+        return this.configuredViewport() !== undefined;
+    }
+    configuredViewport() {
+        const latitude = Number(this.getAttribute("latitude"));
+        const longitude = Number(this.getAttribute("longitude"));
+        if (!Number.isFinite(latitude) || !Number.isFinite(longitude))
+            return undefined;
+        return { center: [longitude, latitude], zoom: this.zoom() };
+    }
+    zoom() {
+        const zoom = Number(this.getAttribute("zoom"));
+        return Number.isFinite(zoom) ? zoom : 14;
+    }
+}
+/**
+ * `<honua-measure-control>` renders distance/area measuring modes.
+ *
+ * The control is only interactive when the controller has a measurement
+ * geometry provider configured (`measurementGeometry` on
+ * {@link CreateHonuaWebComponentControllerOptions}). Without one — for example
+ * the bare in-memory controller — the modes render disabled with a "configure
+ * a provider" affordance, by design: the SDK does not bundle a drawing backend.
+ */
+export class HonuaMeasureControlElement extends HonuaElementBase {
+    static get observedAttributes() {
+        return ["for", "label"];
+    }
+    #mode = "off";
+    attributeChangedCallback() {
+        this.resolveControllerFromContext();
+        this.render();
+    }
+    controllerChanged() {
+        this.render();
+    }
+    render() {
+        const label = this.getAttribute("label") ?? "Measure";
+        const enabled = this.controller?.canMeasure() ?? false;
+        this.setShadowHtml(`
+      <style>${baseStyles()}${controlPanelStyles()}</style>
+      <section class="control-panel" part="panel" aria-label="${escapeHtml(label)}">
+        <div class="control-panel__bar">
+          <h2>${escapeHtml(label)}</h2>
+          <span>${escapeHtml(enabled ? "ready" : "unsupported")}</span>
+        </div>
+        <div class="segmented" role="group" aria-label="${escapeAttribute(label)}">
+          ${["off", "distance", "area"]
+            .map((mode) => `
+            <button type="button" data-measure-mode="${mode}" aria-pressed="${String(this.#mode === mode)}"${enabled ? "" : ' aria-disabled="true" disabled'}>${escapeHtml(modeLabel(mode))}</button>
+          `)
+            .join("")}
+        </div>
+        ${enabled
+            ? ""
+            : `<p class="empty" role="status">Measurement is disabled because no geometry provider is configured. Pass a \`measurementGeometry\` provider to the controller to enable distance and area measuring.</p>`}
+      </section>
+    `);
+        if (!enabled)
+            return;
+        this.shadowRoot?.querySelectorAll("button[data-measure-mode]").forEach((button) => {
+            button.addEventListener("click", () => {
+                void this.setMode((button.dataset.measureMode ?? "off"));
+            });
+        });
+    }
+    async setMode(mode) {
+        this.#mode = mode;
+        const detail = this.controller
+            ? await this.controller.setMeasureMode(mode)
+            : {
+                mode,
+                status: "unsupported",
+                message: "Measurement requires a geometry provider. Configure `measurementGeometry` on the controller to enable measuring.",
+            };
+        this.dispatchTypedEvent("honua-measure-change", detail);
+        this.render();
+    }
+}
+/**
+ * `<honua-sketch-control>` renders point/line/polygon drawing modes.
+ *
+ * Like {@link HonuaMeasureControlElement}, the control is only interactive when
+ * the controller has a sketch geometry provider configured (`sketchGeometry` on
+ * {@link CreateHonuaWebComponentControllerOptions}). Without one the modes
+ * render disabled with a "configure a provider" affordance.
+ */
+export class HonuaSketchControlElement extends HonuaElementBase {
+    static get observedAttributes() {
+        return ["for", "label"];
+    }
+    #mode = "off";
+    attributeChangedCallback() {
+        this.resolveControllerFromContext();
+        this.render();
+    }
+    controllerChanged() {
+        this.render();
+    }
+    render() {
+        const label = this.getAttribute("label") ?? "Sketch";
+        const enabled = this.controller?.canSketch() ?? false;
+        this.setShadowHtml(`
+      <style>${baseStyles()}${controlPanelStyles()}</style>
+      <section class="control-panel" part="panel" aria-label="${escapeHtml(label)}">
+        <div class="control-panel__bar">
+          <h2>${escapeHtml(label)}</h2>
+          <span>${escapeHtml(enabled ? "ready" : "unsupported")}</span>
+        </div>
+        <div class="segmented" role="group" aria-label="${escapeAttribute(label)}">
+          ${["off", "point", "line", "polygon"]
+            .map((mode) => `
+            <button type="button" data-sketch-mode="${mode}" aria-pressed="${String(this.#mode === mode)}"${enabled ? "" : ' aria-disabled="true" disabled'}>${escapeHtml(modeLabel(mode))}</button>
+          `)
+            .join("")}
+        </div>
+        ${enabled
+            ? ""
+            : `<p class="empty" role="status">Sketching is disabled because no geometry provider is configured. Pass a \`sketchGeometry\` provider to the controller to enable point, line, and polygon drawing.</p>`}
+      </section>
+    `);
+        if (!enabled)
+            return;
+        this.shadowRoot?.querySelectorAll("button[data-sketch-mode]").forEach((button) => {
+            button.addEventListener("click", () => {
+                void this.setMode((button.dataset.sketchMode ?? "off"));
+            });
+        });
+    }
+    async setMode(mode) {
+        this.#mode = mode;
+        const detail = this.controller
+            ? await this.controller.setSketchMode(mode)
+            : {
+                mode,
+                status: "unsupported",
+                message: "Sketching requires a geometry provider. Configure `sketchGeometry` on the controller to enable drawing.",
+            };
+        this.dispatchTypedEvent("honua-sketch-change", detail);
+        this.render();
+    }
+}
+export class HonuaPrintExportElement extends HonuaElementBase {
+    static get observedAttributes() {
+        return ["for", "label", "title"];
+    }
+    attributeChangedCallback() {
+        this.resolveControllerFromContext();
+        this.render();
+    }
+    render() {
+        const label = this.getAttribute("label") ?? "Print and export";
+        this.setShadowHtml(`
+      <style>${baseStyles()}${controlPanelStyles()}</style>
+      <section class="control-panel" part="panel" aria-label="${escapeHtml(label)}">
+        <div class="control-panel__bar">
+          <h2>${escapeHtml(label)}</h2>
+          <span>${escapeHtml(typeof window !== "undefined" && typeof window.print === "function" ? "ready" : "unsupported")}</span>
+        </div>
+        <div class="button-stack">
+          <button type="button" data-export-format="print">Print</button>
+          <button type="button" data-export-format="png">Snapshot</button>
+          <button type="button" data-export-format="json">State JSON</button>
+        </div>
+      </section>
+    `);
+        this.shadowRoot?.querySelectorAll("button[data-export-format]").forEach((button) => {
+            button.addEventListener("click", () => this.export(button.dataset.exportFormat));
+        });
+    }
+    export(format) {
+        const title = this.getAttribute("title") ?? this.state?.packageId ?? undefined;
+        if (format === "print" && typeof window !== "undefined" && typeof window.print === "function") {
+            this.dispatchTypedEvent("honua-export", {
+                format,
+                status: "ready",
+                ...(title ? { title } : {}),
+            });
+            window.print();
+            return;
+        }
+        const message = format === "print"
+            ? "Window printing is unavailable."
+            : "Snapshot export requires an application adapter to avoid leaking private map credentials.";
+        this.dispatchTypedEvent("honua-export", {
+            format,
+            status: "unsupported",
+            ...(title ? { title } : {}),
+            message,
+        });
+    }
+}
+export class HonuaMapStatusElement extends HonuaElementBase {
+    static get observedAttributes() {
+        return ["for", "label", "attribution"];
+    }
+    attributeChangedCallback() {
+        this.resolveControllerFromContext();
+        this.render();
+    }
+    render() {
+        const label = this.getAttribute("label") ?? "Map status";
+        const attribution = this.getAttribute("attribution") ?? this.state?.mapPackage?.mapPackageId ?? "Honua";
+        this.setShadowHtml(`
+      <style>${baseStyles()}${mapStatusStyles()}</style>
+      <section class="map-status" part="panel" aria-label="${escapeHtml(label)}">
+        <span aria-label="Approximate scale">${escapeHtml(approximateScale(this.state?.viewport))}</span>
+        <span aria-label="Attribution">${escapeHtml(attribution)}</span>
+        <button type="button" data-fullscreen>Fullscreen</button>
+      </section>
+    `);
+        this.shadowRoot?.querySelector("button[data-fullscreen]")?.addEventListener("click", () => {
+            void this.toggleFullscreen();
+        });
+    }
+    async toggleFullscreen() {
+        const root = this.getRootNode?.();
+        const mapId = this.getAttribute("for");
+        const target = mapId ? getElementById(root, mapId) : this;
+        const requestFullscreen = target?.requestFullscreen;
+        if (!requestFullscreen) {
+            this.dispatchTypedEvent("honua-fullscreen-change", {
+                fullscreen: false,
+                status: "unsupported",
+                message: "Fullscreen is unavailable.",
+            });
+            return;
+        }
+        await requestFullscreen.call(target);
+        this.dispatchTypedEvent("honua-fullscreen-change", {
+            fullscreen: true,
+            status: "ready",
+        });
+    }
+}
+export class HonuaActionPanelElement extends HonuaElementBase {
+    static get observedAttributes() {
+        return ["for", "label", "actions"];
+    }
+    attributeChangedCallback() {
+        this.resolveControllerFromContext();
+        this.render();
+    }
+    render() {
+        const label = this.getAttribute("label") ?? "Actions";
+        const actions = parseActions(this.getAttribute("actions"));
+        this.setShadowHtml(`
+      <style>${baseStyles()}${controlPanelStyles()}</style>
+      <section class="control-panel" part="panel" aria-label="${escapeHtml(label)}">
+        <div class="control-panel__bar">
+          <h2>${escapeHtml(label)}</h2>
+          <span>${escapeHtml(actions.length > 0 ? "ready" : "unsupported")}</span>
+        </div>
+        ${actions.length === 0
+            ? `<p class="empty" role="status">No actions are configured.</p>`
+            : `<div class="button-stack">
+              ${actions
+                .map((action) => `
+                <button type="button" data-action-id="${escapeAttribute(action.id)}" ${action.disabled ? "disabled" : ""}>${escapeHtml(action.label)}</button>
+              `)
+                .join("")}
+            </div>`}
+      </section>
+    `);
+        this.shadowRoot?.querySelectorAll("button[data-action-id]").forEach((button) => {
+            button.addEventListener("click", () => {
+                const action = actions.find((candidate) => candidate.id === button.dataset.actionId);
+                if (!action)
+                    return;
+                this.dispatchTypedEvent("honua-action", {
+                    ...action,
+                    status: action.disabled ? "unsupported" : "ready",
+                });
+            });
+        });
+    }
+}
+export function defineHonuaWebComponents(registry = globalDom.customElements) {
+    if (!registry)
+        return;
+    defineIfMissing(registry, "honua-map", HonuaMapElement);
+    defineIfMissing(registry, "honua-layer-list", HonuaLayerListElement);
+    defineIfMissing(registry, "honua-legend", HonuaLegendElement);
+    defineIfMissing(registry, "honua-feature-table", HonuaFeatureTableElement);
+    defineIfMissing(registry, "honua-search", HonuaSearchElement);
+    defineIfMissing(registry, "honua-editor", HonuaEditorElement);
+    defineIfMissing(registry, "honua-chart", HonuaChartElement);
+    defineIfMissing(registry, "honua-basemap-control", HonuaBasemapControlElement);
+    defineIfMissing(registry, "honua-bookmarks", HonuaBookmarksElement);
+    defineIfMissing(registry, "honua-locate-control", HonuaLocateControlElement);
+    defineIfMissing(registry, "honua-measure-control", HonuaMeasureControlElement);
+    defineIfMissing(registry, "honua-sketch-control", HonuaSketchControlElement);
+    defineIfMissing(registry, "honua-print-export", HonuaPrintExportElement);
+    defineIfMissing(registry, "honua-map-status", HonuaMapStatusElement);
+    defineIfMissing(registry, "honua-action-panel", HonuaActionPanelElement);
+}
+function defineIfMissing(registry, tagName, ctor) {
+    if (!registry.get(tagName))
+        registry.define(tagName, ctor);
+}
+if (globalDom.customElements) {
+    defineHonuaWebComponents(globalDom.customElements);
+}
+function tableModelFromState(state, sourceId, fields, pageSize) {
+    const resolvedSourceId = sourceId ?? Object.keys(state?.featuresBySource ?? {})[0];
+    const rows = resolvedSourceId ? [...(state?.featuresBySource[resolvedSourceId] ?? [])] : [];
+    const modelFields = fields ?? inferFields(rows);
+    return {
+        sourceId: resolvedSourceId,
+        status: state?.status ?? "idle",
+        fields: modelFields,
+        rows: pageSize ? rows.slice(0, pageSize) : rows,
+        totalCount: rows.length,
+    };
+}
+function defaultEditorModel(sourceId) {
+    return {
+        sourceId,
+        status: "idle",
+        capabilities: {
+            canCreate: false,
+            canUpdate: false,
+            canDelete: false,
+            readOnly: true,
+            reason: "Editing is not enabled for this source.",
+        },
+    };
+}
+function defaultChartModel(title) {
+    return {
+        id: "placeholder",
+        title,
+        kind: "placeholder",
+        status: "idle",
+        message: "No chart data",
+    };
+}
+function basemapsFromState(state) {
+    return (state?.layers ?? [])
+        .filter((layer) => layer.type === "background" || layer.metadata?.basemap === true)
+        .map((layer) => ({ id: layer.id, title: layer.title, visible: layer.visible }));
+}
+function parseBookmarks(value) {
+    if (!value)
+        return [];
+    try {
+        const parsed = JSON.parse(value);
+        if (!Array.isArray(parsed))
+            return [];
+        return parsed.flatMap((item) => {
+            if (!item || typeof item !== "object")
+                return [];
+            const candidate = item;
+            if (!candidate.id || !candidate.label || !candidate.viewport)
+                return [];
+            return [{ id: String(candidate.id), label: String(candidate.label), viewport: candidate.viewport }];
+        });
+    }
+    catch {
+        return [];
+    }
+}
+function parseActions(value) {
+    if (!value)
+        return [];
+    try {
+        const parsed = JSON.parse(value);
+        if (!Array.isArray(parsed))
+            return [];
+        return parsed.flatMap((item) => {
+            if (!item || typeof item !== "object")
+                return [];
+            const candidate = item;
+            if (!candidate.id || !candidate.label)
+                return [];
+            return [
+                {
+                    id: String(candidate.id),
+                    label: String(candidate.label),
+                    ...(candidate.disabled ? { disabled: true } : {}),
+                },
+            ];
+        });
+    }
+    catch {
+        return [];
+    }
+}
+function inferFields(rows) {
+    const fields = new Set();
+    for (const row of rows) {
+        for (const field of Object.keys(row.attributes))
+            fields.add(field);
+    }
+    return [...fields];
+}
+function getElementById(root, id) {
+    if (root && "getElementById" in root)
+        return root.getElementById(id);
+    return typeof document !== "undefined" ? document.getElementById(id) : null;
+}
+function formatCell(value) {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "object")
+        return JSON.stringify(value);
+    return String(value);
+}
+function modeLabel(mode) {
+    return mode.charAt(0).toUpperCase() + mode.slice(1);
+}
+function approximateScale(viewport) {
+    const zoom = viewport?.zoom;
+    if (!Number.isFinite(zoom))
+        return "Scale unavailable";
+    const latitude = viewport?.center?.[1] ?? 0;
+    const metersPerPixel = (156543.03392 * Math.cos((latitude * Math.PI) / 180)) / 2 ** Number(zoom);
+    const scale = Math.max(1, Math.round(metersPerPixel * 96 * 39.37));
+    return `1:${scale.toLocaleString("en-US")}`;
+}
+function setText(element, value) {
+    if (element)
+        element.textContent = value;
+}
+function captureFocus(root) {
+    if (!("activeElement" in root))
+        return undefined;
+    const active = root.activeElement;
+    if (!active || !("localName" in active))
+        return undefined;
+    const selector = focusSelector(active);
+    if (!selector)
+        return undefined;
+    const textControl = isTextControl(active) ? active : undefined;
+    return {
+        selector,
+        ...(textControl ? { value: textControl.value } : {}),
+        ...(typeof textControl?.selectionStart === "number" ? { selectionStart: textControl.selectionStart } : {}),
+        ...(typeof textControl?.selectionEnd === "number" ? { selectionEnd: textControl.selectionEnd } : {}),
+        ...(textControl?.selectionDirection ? { selectionDirection: textControl.selectionDirection } : {}),
+    };
+}
+function restoreFocus(root, snapshot) {
+    if (!snapshot || typeof root.querySelector !== "function")
+        return;
+    const target = root.querySelector(snapshot.selector);
+    if (!target || !("focus" in target) || typeof target.focus !== "function")
+        return;
+    target.focus({ preventScroll: true });
+    if (snapshot.value === undefined ||
+        snapshot.selectionStart === undefined ||
+        snapshot.selectionEnd === undefined ||
+        !isTextControl(target) ||
+        target.value !== snapshot.value) {
+        return;
+    }
+    target.setSelectionRange(snapshot.selectionStart, snapshot.selectionEnd, snapshot.selectionDirection ?? "none");
+}
+function focusSelector(element) {
+    const tagName = element.localName;
+    for (const name of ["id", "name"]) {
+        const value = element.getAttribute(name);
+        if (value)
+            return `${tagName}[${name}="${cssAttribute(value)}"]`;
+    }
+    for (const name of element
+        .getAttributeNames()
+        .filter((attribute) => attribute.startsWith("data-"))
+        .sort()) {
+        const value = element.getAttribute(name);
+        if (value)
+            return `${tagName}[${name}="${cssAttribute(value)}"]`;
+    }
+    return undefined;
+}
+function isTextControl(element) {
+    return ((element.localName === "input" || element.localName === "textarea") &&
+        "value" in element &&
+        "setSelectionRange" in element);
+}
+function cssAttribute(value) {
+    return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+function browserOrigin() {
+    return typeof window !== "undefined" && window.location?.origin ? window.location.origin : "http://localhost";
+}
+function escapeHtml(value) {
+    return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function escapeAttribute(value) {
+    return escapeHtml(value).replace(/'/g, "&#39;");
+}
+function baseStyles() {
+    return `
+    :host {
+      --honua-ui-bg: #ffffff;
+      --honua-ui-fg: #172033;
+      --honua-ui-muted: #667085;
+      --honua-ui-border: #d0d5dd;
+      --honua-ui-accent: #1d4ed8;
+      --honua-ui-accent-fg: #ffffff;
+      --honua-ui-surface: #f8fafc;
+      box-sizing: border-box;
+      color: var(--honua-ui-fg);
+      display: block;
+      font: 14px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+    *, *::before, *::after { box-sizing: inherit; }
+    button, input, select { font: inherit; }
+    button {
+      border: 1px solid var(--honua-ui-border);
+      background: var(--honua-ui-bg);
+      border-radius: 6px;
+      color: inherit;
+      cursor: pointer;
+      min-height: 32px;
+      padding: 0 10px;
+    }
+    button:disabled { cursor: not-allowed; opacity: 0.55; }
+    h2 { font-size: 14px; margin: 0; }
+    .empty, .muted { color: var(--honua-ui-muted); }
+    .sr-only {
+      border: 0;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute;
+      width: 1px;
+    }
+  `;
+}
+function mapStyles() {
+    return `
+    .map {
+      background: #dbeafe;
+      border: 1px solid var(--honua-ui-border);
+      border-radius: 8px;
+      display: grid;
+      grid-template-rows: auto minmax(220px, 1fr) auto;
+      min-height: 320px;
+      overflow: hidden;
+    }
+    .map__chrome, .map__footer {
+      align-items: center;
+      background: rgba(255, 255, 255, 0.9);
+      display: flex;
+      gap: 8px;
+      justify-content: space-between;
+      padding: 8px 10px;
+    }
+    .map__controls { align-items: center; display: flex; gap: 6px; }
+    .icon-button { min-width: 32px; padding: 0; }
+    .zoom { min-width: 32px; text-align: center; }
+    .map__canvas {
+      background:
+        linear-gradient(90deg, rgba(255,255,255,0.32) 1px, transparent 1px),
+        linear-gradient(0deg, rgba(255,255,255,0.32) 1px, transparent 1px),
+        #bfdbfe;
+      background-size: 40px 40px;
+      min-height: 220px;
+      overflow: hidden;
+      position: relative;
+    }
+    .map__renderer {
+      height: 100%;
+      inset: 0;
+      min-height: inherit;
+      position: absolute;
+      width: 100%;
+    }
+    .map__renderer.maplibregl-map,
+    .map__renderer .maplibregl-map,
+    .map__renderer .maplibregl-canvas-container,
+    .map__renderer .maplibregl-canvas {
+      height: 100%;
+      width: 100%;
+    }
+    .map__renderer .maplibregl-canvas-container {
+      inset: 0;
+      position: absolute;
+    }
+    .map__renderer .maplibregl-canvas {
+      left: 0;
+      position: absolute;
+      top: 0;
+    }
+    .map__status {
+      background: rgba(255,255,255,0.86);
+      border-radius: 6px;
+      color: var(--honua-ui-muted);
+      left: 10px;
+      padding: 4px 7px;
+      position: absolute;
+      top: 10px;
+      z-index: 1;
+    }
+    .map__status:empty { display: none; }
+    .maplibregl-ctrl-attrib,
+    .maplibregl-control-container {
+      display: none;
+    }
+  `;
+}
+function listStyles() {
+    return `
+    .panel {
+      background: var(--honua-ui-bg);
+      border: 1px solid var(--honua-ui-border);
+      border-radius: 8px;
+      margin: 0;
+      padding: 10px;
+    }
+    legend { font-weight: 650; padding: 0 4px; }
+    .stack { display: grid; gap: 8px; }
+    .check-row { align-items: center; display: flex; gap: 8px; min-height: 28px; }
+    .legend { display: grid; gap: 8px; list-style: none; margin: 10px 0 0; padding: 0; }
+    .legend li { align-items: center; display: flex; gap: 8px; min-height: 24px; }
+    .swatch {
+      background: var(--swatch);
+      border: 1px solid rgba(15, 23, 42, 0.18);
+      border-radius: 3px;
+      display: inline-block;
+      height: 16px;
+      width: 24px;
+    }
+    img.swatch { object-fit: cover; }
+  `;
+}
+function tableStyles() {
+    return `
+    .table-panel {
+      border: 1px solid var(--honua-ui-border);
+      border-radius: 8px;
+      overflow: hidden;
+    }
+    .table-panel__bar {
+      align-items: center;
+      background: var(--honua-ui-surface);
+      display: flex;
+      justify-content: space-between;
+      padding: 8px 10px;
+    }
+    .table-wrap { max-height: 300px; overflow: auto; }
+    table { border-collapse: collapse; min-width: 100%; table-layout: fixed; }
+    th, td {
+      border-top: 1px solid var(--honua-ui-border);
+      overflow: hidden;
+      padding: 7px 9px;
+      text-align: left;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    th { background: #f8fafc; font-weight: 650; }
+    tr[aria-selected="true"] td { background: #dbeafe; }
+    tbody tr[data-feature-id] { cursor: pointer; }
+    tbody tr[data-feature-id]:focus { outline: 2px solid var(--honua-ui-accent); outline-offset: -2px; }
+  `;
+}
+function searchStyles() {
+    return `
+    .search {
+      border: 1px solid var(--honua-ui-border);
+      border-radius: 8px;
+      padding: 10px;
+    }
+    form { display: grid; gap: 8px; grid-template-columns: minmax(120px, 1fr) auto; }
+    input {
+      border: 1px solid var(--honua-ui-border);
+      border-radius: 6px;
+      min-height: 32px;
+      min-width: 0;
+      padding: 0 9px;
+    }
+    .results { display: grid; gap: 6px; list-style: none; margin: 10px 0 0; padding: 0; }
+    .results button { text-align: left; width: 100%; }
+  `;
+}
+function editorStyles() {
+    return `
+    .editor {
+      border: 1px solid var(--honua-ui-border);
+      border-radius: 8px;
+      padding: 10px;
+    }
+    .editor__bar, .editor__actions { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
+    .editor__actions { justify-content: flex-start; }
+    .selection { margin: 10px 0 4px; }
+    .muted { margin: 0 0 10px; }
+  `;
+}
+function chartStyles() {
+    return `
+    .chart {
+      border: 1px solid var(--honua-ui-border);
+      border-radius: 8px;
+      padding: 10px;
+    }
+    .bars { display: grid; gap: 8px; margin-top: 10px; }
+    .bar-row { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(70px, 1fr) 3fr auto; }
+    .bar { background: #e5e7eb; border-radius: 999px; height: 10px; overflow: hidden; position: relative; }
+    .bar::before {
+      background: var(--bar-color);
+      border-radius: inherit;
+      content: "";
+      inset: 0 auto 0 0;
+      position: absolute;
+      width: var(--bar);
+    }
+  `;
+}
+function controlPanelStyles() {
+    return `
+    .control-panel {
+      background: var(--honua-ui-bg);
+      border: 1px solid var(--honua-ui-border);
+      border-radius: 8px;
+      display: grid;
+      gap: 10px;
+      min-width: 180px;
+      padding: 10px;
+    }
+    .control-panel__bar {
+      align-items: center;
+      display: flex;
+      gap: 8px;
+      justify-content: space-between;
+    }
+    .control-panel__bar span {
+      color: var(--honua-ui-muted);
+      font-size: 12px;
+    }
+    .button-stack {
+      display: grid;
+      gap: 6px;
+    }
+    .button-stack button {
+      justify-content: flex-start;
+      text-align: left;
+    }
+    .segmented {
+      display: grid;
+      gap: 6px;
+      grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
+    }
+    .segmented button {
+      min-width: 0;
+      padding: 0 8px;
+    }
+    button[aria-pressed="true"] {
+      background: var(--honua-ui-accent);
+      border-color: var(--honua-ui-accent);
+      color: var(--honua-ui-accent-fg);
+    }
+    p {
+      margin: 0;
+    }
+  `;
+}
+function mapStatusStyles() {
+    return `
+    .map-status {
+      align-items: center;
+      background: var(--honua-ui-bg);
+      border: 1px solid var(--honua-ui-border);
+      border-radius: 8px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      justify-content: space-between;
+      min-height: 42px;
+      padding: 6px 8px;
+    }
+    span {
+      color: var(--honua-ui-muted);
+      min-width: 0;
+    }
+  `;
+}