@loadbare/app 0.4.0

package/dist/client.js

@@ -0,0 +1,522 @@
+"use strict";
+(() => {
+  // core/lb-constants.ts
+  var ATTR_QUERY = "lb-query";
+  var ATTR_KEY = "lb-key";
+  var ATTR_CELL = "lb-cell";
+  var ATTR_VALUE = "lb-value";
+  var ATTR_GROUP = "lb-group";
+  var ATTR_SORT = "lb-sort";
+  var ATTR_ROW_COUNT = "data-rows";
+  var LB_EVENT_NAME = "lb-request";
+  var ATTR_ACTION = "lb-action";
+  var ATTR_DELETE = "lb-delete";
+  var ATTR_INSERT = "lb-insert";
+  var ATTR_UPDATE = "lb-update";
+  var ATTR_NAV_LINK = "lb-nav-link";
+  var PAGE_TEMPLATE_PREFIX = "page-";
+  var HUB_TAG_NAME = "lb-hub";
+  var ATTR_PENDING = "data-lb-pending";
+  var ATTR_ERROR = "data-lb-error";
+  var LB_DATA_ENDPOINT = "/lb/data";
+  var LB_REQUEST_ENDPOINT = "/lb";
+  var LB_REQUEST_TIMEOUT_MS = 1e4;
+
+  // widgets/lb-input.ts
+  var LbInput = class extends HTMLElement {
+    static observedAttributes = [ATTR_VALUE];
+    attributeChangedCallback(_name, _old, value) {
+      const input = this.querySelector("input");
+      if (!input) {
+        console.error(`lb-input: no <input> to receive the value`);
+        return;
+      }
+      input.value = value;
+    }
+    connectedCallback() {
+      this.addEventListener("change", () => {
+        const input = this.querySelector("input");
+        if (!input) {
+          console.error(`lb-input: change with no <input>, ignoring`);
+          return;
+        }
+        const query = this.closest(`[${ATTR_QUERY}]`)?.getAttribute(ATTR_QUERY);
+        const key = this.closest(`[${ATTR_KEY}]`)?.getAttribute(ATTR_KEY);
+        const cell = this.getAttribute(ATTR_CELL);
+        if (!query || !key || !cell) {
+          console.error(
+            `lb-input: change with no query/key/cell coordinates, ignoring`
+          );
+          return;
+        }
+        const detail = {
+          op: "cell-change",
+          query,
+          key,
+          cell,
+          value: input.value
+        };
+        this.dispatchEvent(
+          new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail })
+        );
+      });
+    }
+  };
+  customElements.define("lb-input", LbInput);
+
+  // widgets/lb-select.ts
+  var LbSelect = class extends HTMLElement {
+    static observedAttributes = [ATTR_VALUE];
+    attributeChangedCallback(_name, _old, value) {
+      const select = this.querySelector("select");
+      if (!select) {
+        console.error(`lb-select: no <select> to receive the value`);
+        return;
+      }
+      select.value = value;
+    }
+    connectedCallback() {
+      this.addEventListener("change", () => {
+        const select = this.querySelector("select");
+        if (!select) {
+          console.error(`lb-select: change with no <select>, ignoring`);
+          return;
+        }
+        const name = this.getAttribute(ATTR_ACTION);
+        if (!name) {
+          console.error(`lb-select: no ${ATTR_ACTION}, nothing to send`);
+          return;
+        }
+        const detail = {
+          op: "action",
+          name,
+          value: select.value
+        };
+        this.dispatchEvent(
+          new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail })
+        );
+      });
+    }
+  };
+  customElements.define("lb-select", LbSelect);
+
+  // core/lb-types.ts
+  function isProjection(result) {
+    const op = result.op;
+    return op === "rows" || op === "patch";
+  }
+
+  // hub/lb-apply.ts
+  function land(el, value) {
+    if (el.localName.includes("-")) el.setAttribute(ATTR_VALUE, value);
+    else el.textContent = value;
+  }
+  function applyTuple(root, cells) {
+    for (const [cell, value] of Object.entries(cells)) {
+      const selector = `[${ATTR_CELL}="${cell}"]`;
+      if (root.matches(selector)) land(root, value);
+      for (const el of root.querySelectorAll(selector)) land(el, value);
+    }
+  }
+  function landRows(scope, query, result) {
+    const host = scope;
+    if (typeof host.acceptRows !== "function") {
+      console.error(
+        `lb-hub: query '${query}' returned rows, but <${scope.localName}> is not a list widget`
+      );
+      return;
+    }
+    host.acceptRows(result);
+  }
+  function applyData(root, data) {
+    for (const [query, result] of Object.entries(data)) {
+      const scopes = root.querySelectorAll(`[${ATTR_QUERY}="${query}"]`);
+      if (scopes.length === 0) {
+        console.warn(`lb-hub: no scope for query '${query}', skipping`);
+        continue;
+      }
+      for (const scope of scopes) {
+        if (isProjection(result)) landRows(scope, query, result);
+        else applyTuple(scope, result);
+      }
+    }
+  }
+
+  // hub/lb-rows.ts
+  var before = (row, _tuple, template) => {
+    template.parentElement.insertBefore(row, template);
+  };
+  function templateIn(scope) {
+    const template = scope.querySelector("template");
+    if (!template) {
+      console.error(
+        `lb-rows: <${scope.localName}> has no <template> to clone`
+      );
+      return null;
+    }
+    if (!template.getAttribute(ATTR_KEY)) {
+      console.error(
+        `lb-rows: the <template> in <${scope.localName}> has no ${ATTR_KEY} naming the column that identifies a row`
+      );
+      return null;
+    }
+    return template;
+  }
+  function showing(scope, template) {
+    const rows = /* @__PURE__ */ new Map();
+    for (const el of scope.querySelectorAll(`[${ATTR_KEY}]`)) {
+      if (el !== template) rows.set(el.getAttribute(ATTR_KEY), el);
+    }
+    return rows;
+  }
+  function applyRows(scope, result, place = before) {
+    const template = templateIn(scope);
+    if (!template) return;
+    const keyCell = template.getAttribute(ATTR_KEY);
+    const rows = showing(scope, template);
+    const upsert = (tuple) => {
+      const key = tuple[keyCell];
+      if (key === void 0) {
+        console.error(
+          `lb-rows: a tuple for <${scope.localName}> has no '${keyCell}' cell`
+        );
+        return null;
+      }
+      let row = rows.get(key);
+      const fresh = row === void 0;
+      if (!row) {
+        row = template.content.firstElementChild.cloneNode(true);
+        row.setAttribute(ATTR_KEY, key);
+        rows.set(key, row);
+      }
+      applyTuple(row, tuple);
+      if (fresh || result.op === "rows") place(row, tuple, template);
+      return key;
+    };
+    if (result.op === "rows") {
+      const arrived = /* @__PURE__ */ new Set();
+      for (const tuple of result.rows) {
+        const key = upsert(tuple);
+        if (key !== null) arrived.add(key);
+      }
+      for (const [key, row] of rows) if (!arrived.has(key)) row.remove();
+    } else {
+      for (const tuple of result.rows ?? []) upsert(tuple);
+      for (const key of result.drop ?? []) rows.get(key)?.remove();
+    }
+    scope.setAttribute(ATTR_ROW_COUNT, String(showing(scope, template).size));
+  }
+
+  // widgets/lb-list.ts
+  var LbList = class extends HTMLElement {
+    acceptRows(result) {
+      applyRows(this, result);
+    }
+  };
+  customElements.define("lb-list", LbList);
+
+  // widgets/lb-options.ts
+  var LbOptions = class extends HTMLElement {
+    acceptRows(result) {
+      applyRows(this, result, this.place);
+      for (const option of this.querySelectorAll(`option[${ATTR_KEY}]`)) {
+        option.setAttribute("value", option.getAttribute(ATTR_KEY));
+      }
+      for (const group of this.querySelectorAll("optgroup")) {
+        if (!group.querySelector("option")) group.remove();
+      }
+    }
+    place = (row, tuple, template) => {
+      const select = this.querySelector("select");
+      const groupCell = template.getAttribute(ATTR_GROUP);
+      if (!groupCell) {
+        select.insertBefore(row, template);
+        return;
+      }
+      this.groupFor(select, template, tuple[groupCell] ?? "").append(row);
+    };
+    /** The group with this label, or a new one in front of the template. */
+    groupFor(select, template, label) {
+      for (const group2 of select.querySelectorAll("optgroup")) {
+        if (group2.label === label) return group2;
+      }
+      const group = document.createElement("optgroup");
+      group.label = label;
+      select.insertBefore(group, template);
+      return group;
+    }
+    connectedCallback() {
+      this.addEventListener("change", () => {
+        const select = this.querySelector("select");
+        if (!select) {
+          console.error(`lb-options: change with no <select>, ignoring`);
+          return;
+        }
+        const name = this.getAttribute(ATTR_ACTION);
+        if (!name) {
+          console.error(`lb-options: no ${ATTR_ACTION}, nothing to send`);
+          return;
+        }
+        const detail = { op: "action", name, value: select.value };
+        this.dispatchEvent(
+          new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail })
+        );
+      });
+    }
+  };
+  customElements.define("lb-options", LbOptions);
+
+  // widgets/lb-table.ts
+  var GROUP_ROW = "data-group";
+  var LbTable = class extends HTMLElement {
+    acceptRows(result) {
+      applyRows(this, result, this.place);
+      for (const heading of this.querySelectorAll(`tr[${GROUP_ROW}]`)) {
+        if (this.section(heading).rows.length === 0) heading.remove();
+      }
+    }
+    /**
+     * Group first, then sort within the group.
+     *
+     * Inserting a row before the first one that sorts after it keeps the
+     * section ordered, whatever else is in it — which is what lets a whole set
+     * and a single patched row take the same path.
+     */
+    place = (row, tuple, template) => {
+      const groupCell = template.getAttribute(ATTR_GROUP);
+      const sortCell = template.getAttribute(ATTR_SORT);
+      const heading = groupCell ? this.headingFor(template, tuple[groupCell] ?? "") : null;
+      const { rows, end } = this.section(heading);
+      const value = sortCell ? tuple[sortCell] ?? "" : "";
+      const after = sortCell ? rows.find((other) => other !== row && cellOf(other, sortCell) > value) : void 0;
+      template.parentElement.insertBefore(row, after ?? end);
+    };
+    /**
+     * The rows of one section, and the node it ends at.
+     *
+     * A section runs from its heading to the next heading, or to the template
+     * if there is none after it. Without grouping there is one section and it
+     * is the whole body — the heading row the page wrote is skipped along the
+     * way, because it carries no key and is therefore not a row.
+     */
+    section(heading) {
+      const template = this.querySelector("template");
+      const rows = [];
+      let node = heading ? heading.nextElementSibling : template.parentElement.firstElementChild;
+      while (node && node !== template && !node.hasAttribute(GROUP_ROW)) {
+        if (node.hasAttribute(ATTR_KEY)) rows.push(node);
+        node = node.nextElementSibling;
+      }
+      return { rows, end: node ?? template };
+    }
+    /** The section with this label, or a new one in front of the template. */
+    headingFor(template, label) {
+      const body = template.parentElement;
+      for (const heading2 of body.querySelectorAll(`tr[${GROUP_ROW}]`)) {
+        if (heading2.getAttribute(GROUP_ROW) === label) return heading2;
+      }
+      const heading = document.createElement("tr");
+      heading.setAttribute(GROUP_ROW, label);
+      const cell = document.createElement("th");
+      cell.setAttribute("scope", "rowgroup");
+      cell.colSpan = template.content.firstElementChild?.childElementCount ?? 1;
+      cell.textContent = label;
+      heading.append(cell);
+      body.insertBefore(heading, template);
+      return heading;
+    }
+  };
+  function cellOf(row, cell) {
+    const selector = `[${ATTR_CELL}="${cell}"]`;
+    const el = row.matches(selector) ? row : row.querySelector(selector);
+    return el?.textContent ?? "";
+  }
+  customElements.define("lb-table", LbTable);
+
+  // widgets/lb-picker.ts
+  var LbPicker = class extends LbOptions {
+  };
+  customElements.define("lb-picker", LbPicker);
+
+  // hub/lb-hub.ts
+  function coordinates(el) {
+    const query = el.closest(`[${ATTR_QUERY}]`)?.getAttribute(ATTR_QUERY);
+    const key = el.closest(`[${ATTR_KEY}]`)?.getAttribute(ATTR_KEY);
+    const cell = el.getAttribute(ATTR_CELL);
+    return {
+      ...query === null || query === void 0 ? {} : { query },
+      ...key === null || key === void 0 ? {} : { key },
+      ...cell === null ? {} : { cell }
+    };
+  }
+  function controlValue(el) {
+    const control = el instanceof HTMLInputElement || el instanceof HTMLSelectElement || el instanceof HTMLTextAreaElement ? el : el.querySelector("input, select, textarea");
+    return control?.value;
+  }
+  function gatherValues(form) {
+    const values = {};
+    for (const cell of form.querySelectorAll(`[${ATTR_CELL}]`)) {
+      const name = cell.getAttribute(ATTR_CELL);
+      const value = controlValue(cell);
+      if (value === void 0) {
+        console.warn(
+          `lb-hub: lb-cell '${name}' has no control to read, ignoring it`,
+          cell
+        );
+        continue;
+      }
+      values[name] = value;
+    }
+    return values;
+  }
+  function pageNameFor(path) {
+    const name = path.replace(/^\/+|\/+$/g, "");
+    return name === "" ? "counter" : name;
+  }
+  async function fetchData(url, init) {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), LB_REQUEST_TIMEOUT_MS);
+    try {
+      const res = await fetch(url, { ...init, signal: controller.signal });
+      if (!res.ok) {
+        throw new Error(`lb-hub: server responded ${res.status} for ${url}`);
+      }
+      return await res.json();
+    } finally {
+      clearTimeout(timeout);
+    }
+  }
+  var LbHub = class extends HTMLElement {
+    main;
+    /**
+     * The page currently in <main>. Hooks are declared per page, so a request
+     * has to say which page it came from. The page rides on the URL rather
+     * than in the request, leaving the operation set closed.
+     */
+    page = "";
+    connectedCallback() {
+      this.main = this.querySelector("main");
+      this.addEventListener(LB_EVENT_NAME, (e) => {
+        const request = e.detail;
+        if (!request?.op) {
+          console.warn(`lb-hub: event without an op, ignoring`, request);
+          return;
+        }
+        const origin = e.target;
+        origin?.removeAttribute(ATTR_ERROR);
+        origin?.setAttribute(ATTR_PENDING, "");
+        const url = `${LB_REQUEST_ENDPOINT}?page=${encodeURIComponent(this.page)}`;
+        void fetchData(url, {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify(request)
+        }).then((data) => applyData(this.main, data)).catch((err) => {
+          console.error(`lb-hub: request failed`, err);
+          origin?.setAttribute(ATTR_ERROR, "");
+        }).finally(() => origin?.removeAttribute(ATTR_PENDING));
+      });
+      this.addEventListener("click", (e) => {
+        const el = e.target?.closest(`[${ATTR_ACTION}]`);
+        if (!el || el.localName.includes("-")) return;
+        e.preventDefault();
+        const detail = {
+          op: "action",
+          name: el.getAttribute(ATTR_ACTION),
+          ...coordinates(el)
+        };
+        el.dispatchEvent(
+          new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail })
+        );
+      });
+      this.addEventListener("click", (e) => {
+        const el = e.target?.closest(`[${ATTR_DELETE}]`);
+        if (!el || el.localName.includes("-")) return;
+        e.preventDefault();
+        const { query, key } = coordinates(el);
+        if (!query || !key) {
+          console.warn(`lb-hub: lb-delete with no query/key coordinates, ignoring`, el);
+          return;
+        }
+        const detail = { op: "tuple-delete", query, key };
+        el.dispatchEvent(
+          new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail })
+        );
+      });
+      this.addEventListener("submit", (e) => {
+        const form = e.target?.closest(`[${ATTR_INSERT}]`);
+        if (!form) return;
+        e.preventDefault();
+        const { query } = coordinates(form);
+        if (!query) {
+          console.warn(`lb-hub: lb-insert with no lb-query, ignoring`, form);
+          return;
+        }
+        const detail = {
+          op: "tuple-insert",
+          query,
+          values: gatherValues(form)
+        };
+        form.dispatchEvent(
+          new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail })
+        );
+      });
+      this.addEventListener("submit", (e) => {
+        const form = e.target?.closest(`[${ATTR_UPDATE}]`);
+        if (!form) return;
+        e.preventDefault();
+        const { query, key } = coordinates(form);
+        if (!query || !key) {
+          console.warn(
+            `lb-hub: lb-update with no query/key coordinates, ignoring`,
+            form
+          );
+          return;
+        }
+        const detail = {
+          op: "tuple-update",
+          query,
+          key,
+          values: gatherValues(form)
+        };
+        form.dispatchEvent(
+          new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail })
+        );
+      });
+      this.addEventListener("click", (e) => {
+        const link = e.target?.closest(`a[${ATTR_NAV_LINK}]`);
+        if (!link) return;
+        e.preventDefault();
+        const path = new URL(link.href).pathname;
+        history.pushState(null, "", path);
+        void this.navigate(path);
+      });
+      addEventListener("popstate", () => void this.navigate(location.pathname));
+      void this.navigate(location.pathname);
+    }
+    /**
+     * Navigation is the one operation that replaces host DOM. The host is
+     * already in the document, so selecting a page is getElementById() and
+     * there is no fetching mechanism on the host channel.
+     */
+    async navigate(path) {
+      const page = pageNameFor(path);
+      const template = document.getElementById(PAGE_TEMPLATE_PREFIX + page);
+      if (!(template instanceof HTMLTemplateElement)) {
+        console.error(`lb-hub: no page host for '${page}'`);
+        return;
+      }
+      let data = {};
+      try {
+        data = await fetchData(
+          `${LB_DATA_ENDPOINT}?page=${encodeURIComponent(page)}`
+        );
+      } catch (err) {
+        console.error(`lb-hub: failed to load data for '${page}'`, err);
+      }
+      this.page = page;
+      this.main.replaceChildren(template.content.cloneNode(true));
+      applyData(this.main, data);
+    }
+  };
+  customElements.define(HUB_TAG_NAME, LbHub);
+})();

package/dist/core/lb-constants.d.ts

@@ -0,0 +1,23 @@
+export declare const ATTR_QUERY = "lb-query";
+export declare const ATTR_KEY = "lb-key";
+export declare const ATTR_CELL = "lb-cell";
+export declare const ATTR_VALUE = "lb-value";
+export declare const ATTR_GROUP = "lb-group";
+export declare const ATTR_SORT = "lb-sort";
+export declare const ATTR_ROW_COUNT = "data-rows";
+export declare const LB_EVENT_NAME = "lb-request";
+export declare const ATTR_ACTION = "lb-action";
+export declare const ATTR_DELETE = "lb-delete";
+export declare const ATTR_INSERT = "lb-insert";
+export declare const ATTR_UPDATE = "lb-update";
+export declare const ATTR_SLOT = "lb-slot";
+export declare const ATTR_TEMPLATE = "lb-template";
+export declare const ATTR_NAV_LINK = "lb-nav-link";
+export declare const PAGE_TEMPLATE_PREFIX = "page-";
+export declare const HUB_TAG_NAME = "lb-hub";
+export declare const ATTR_PENDING = "data-lb-pending";
+export declare const ATTR_ERROR = "data-lb-error";
+export declare const LB_DATA_ENDPOINT = "/lb/data";
+export declare const LB_REQUEST_ENDPOINT = "/lb";
+export declare const LB_REQUEST_TIMEOUT_MS = 10000;
+//# sourceMappingURL=lb-constants.d.ts.map

package/dist/core/lb-constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-constants.d.ts","sourceRoot":"","sources":["../../core/lb-constants.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,aAAa,CAAC;AACrC,eAAO,MAAM,QAAQ,WAAW,CAAC;AACjC,eAAO,MAAM,SAAS,YAAY,CAAC;AACnC,eAAO,MAAM,UAAU,aAAa,CAAC;AAMrC,eAAO,MAAM,UAAU,aAAa,CAAC;AAKrC,eAAO,MAAM,SAAS,YAAY,CAAC;AAOnC,eAAO,MAAM,cAAc,cAAc,CAAC;AAK1C,eAAO,MAAM,aAAa,eAAe,CAAC;AAM1C,eAAO,MAAM,WAAW,cAAc,CAAC;AAMvC,eAAO,MAAM,WAAW,cAAc,CAAC;AAKvC,eAAO,MAAM,WAAW,cAAc,CAAC;AAOvC,eAAO,MAAM,WAAW,cAAc,CAAC;AAMvC,eAAO,MAAM,SAAS,YAAY,CAAC;AAYnC,eAAO,MAAM,aAAa,gBAAgB,CAAC;AAK3C,eAAO,MAAM,aAAa,gBAAgB,CAAC;AAG3C,eAAO,MAAM,oBAAoB,UAAU,CAAC;AAQ5C,eAAO,MAAM,YAAY,WAAW,CAAC;AAQrC,eAAO,MAAM,YAAY,oBAAoB,CAAC;AAO9C,eAAO,MAAM,UAAU,kBAAkB,CAAC;AAG1C,eAAO,MAAM,gBAAgB,aAAa,CAAC;AAC3C,eAAO,MAAM,mBAAmB,QAAQ,CAAC;AAIzC,eAAO,MAAM,qBAAqB,QAAS,CAAC"}

package/dist/core/lb-constants.js

@@ -0,0 +1,95 @@
+// Every hub attribute name lives here. Nothing writes one as a string
+// literal — not a widget, not a page host, not a test. See docs/guide.md,
+// "Attribute vocabulary".
+// --- Addressing (docs/data-binding.md) ---------------------------------
+export const ATTR_QUERY = "lb-query";
+export const ATTR_KEY = "lb-key";
+export const ATTR_CELL = "lb-cell";
+export const ATTR_VALUE = "lb-value";
+// Named on a row template, and read by a list widget that groups its rows
+// rather than by the hub. Grouping is placement, and placement is the
+// widget's — but the name is shared, because a grouped <select> and a table
+// with section headings are asking the same thing of the same data.
+export const ATTR_GROUP = "lb-group";
+// Named on a row template beside lb-group, and read by the same kind of
+// widget for the same reason. Sorting and grouping are one question — where
+// does this row go? — and both answers are local.
+export const ATTR_SORT = "lb-sort";
+// Stamped on a list widget by the shared row machinery: how many rows it is
+// showing. It is HTML's namespace rather than Loadbare App's because nothing
+// addresses it — it is derived from rows the hub already knows, exactly as
+// the section heading in lb-table is. It exists so that "no members yet"
+// is a stylesheet rule rather than a conditional in every list widget.
+export const ATTR_ROW_COUNT = "data-rows";
+// --- Requests (docs/requests.md) ---------------------------------------
+// One event name, used by a widget reaching the server and by a widget
+// reaching an ancestor widget.
+export const LB_EVENT_NAME = "lb-request";
+// Names a declared action. On a native element, the hub turns a click into
+// the request; on a widget, the widget builds it from whatever interaction
+// it owns. Either way the name must appear in the page's hooks or it is
+// refused.
+export const ATTR_ACTION = "lb-action";
+// Marks a native element as deleting the tuple it is inside — the CRUD
+// counterpart to lb-action. It needs no declared name: tuple-delete takes
+// only the row's own lb-query/lb-key coordinates, which is all the server
+// needs to know which row and whether the operation is permitted on it.
+export const ATTR_DELETE = "lb-delete";
+// Marks a <form> as building a new tuple on submit. The hub gathers every
+// lb-cell inside it into a values map — no lb-key, because there is no row
+// yet — and the form's own lb-query says which query it is inserting into.
+export const ATTR_INSERT = "lb-insert";
+// Marks a <form> as committing several cells of one existing tuple at once
+// on submit — the batch counterpart to cell-change. The hub gathers the
+// same values map lb-insert does, plus the row's own lb-key: a form that is
+// a list's row template root, or sits inside one, has both from its
+// ancestors exactly as a delete button does.
+export const ATTR_UPDATE = "lb-update";
+// --- Expansion (docs/expansion.md) -------------------------------------
+// Marks the element in a definition whose children receive the authored
+// inner content. An attribute rather than an element because HTML content
+// models discard foreign elements inside <select> and <table>.
+export const ATTR_SLOT = "lb-slot";
+// One name in two positions. In a definition it marks a destination; on an
+// authored <template> it names the destination that template is for, and the
+// template is unwrapped into it.
+//
+// It exists because the parser, not the content model, is the obstacle. A
+// <thead> written inside <lb-table> on a page is not in a table, so the
+// tokenizer drops the tag and keeps the text. A <template> survives anywhere
+// and its contents parse as if they were in a table, so wrapping the markup
+// is what gets it to expansion intact — and unwrapping it is what puts real
+// elements in the shipped document.
+export const ATTR_TEMPLATE = "lb-template";
+// --- Host channel (docs/bundling.md) -----------------------------------
+// Only anchors carrying this are intercepted, so external links are never
+// hijacked.
+export const ATTR_NAV_LINK = "lb-nav-link";
+// A page host ships as <template id="page-<name>">.
+export const PAGE_TEMPLATE_PREFIX = "page-";
+// The hub's own tag. It is exempt from the rule every other LB-* tag
+// follows: expansion does not require it to have a definition (build/expand.ts),
+// and the client build does not require it to have a script of its own
+// (build/elements.ts) — it is the framework's live element, always present,
+// registered once by the package's main entry point, not a widget an
+// application discovers or declares.
+export const HUB_TAG_NAME = "lb-hub";
+// --- Request lifecycle --------------------------------------------------
+// Stamped on the element that dispatched a request — the button, form, or
+// widget itself — for the duration of its round trip. It carries no
+// meaning beyond "in flight": a stylesheet dims the element, or a custom
+// button widget watches it to disable itself, but the hub itself only sets
+// and clears it.
+export const ATTR_PENDING = "data-lb-pending";
+// Stamped on the same element if that round trip failed — a non-2xx
+// response, a thrown application error, or a timeout, all alike. Cleared at
+// the start of that element's next request. What (if anything) an
+// application shows for it is undecided; this is only the fact that it
+// happened.
+export const ATTR_ERROR = "data-lb-error";
+// --- Wire --------------------------------------------------------------
+export const LB_DATA_ENDPOINT = "/lb/data";
+export const LB_REQUEST_ENDPOINT = "/lb";
+// A client-side deadline for one round trip. fetch() has no deadline of its
+// own; past this the request is aborted and treated as a failure.
+export const LB_REQUEST_TIMEOUT_MS = 10_000;