@gramlot/gramlot-examples 0.3.3 → 0.3.4

package/src/gramlot_examples/gallery/dist/layout.js

@@ -34,7 +34,7 @@ function annotation(parameter) {
   });
   return alternatives.length === 1 ? alternatives[0] : { kind: "union", items: alternatives };
 }
-function defineComponent({ name, tag, base, mixins = [], parameters = {}, subTags = "", presentationDefaults = [], dataScope = false, command = false, implementation }) {
+function defineComponent({ name, tag, base, mixins = [], parameters = {}, subTags = "", presentationDefaults = [], dataScope = false, command = false, childParameters = {}, sourceContext = false, implementation }) {
   webcomponentCode({ code: tag });
   if (!/^[a-zA-Z][a-zA-Z0-9]*$/.test(name)) throw new TypeError("Invalid component authoring name");
   const effective = { ...base.parameters };
@@ -56,6 +56,8 @@ function defineComponent({ name, tag, base, mixins = [], parameters = {}, subTag
     command,
     mixins: Object.freeze([...mixins]),
     parameters: freeze(structuredClone(effective)),
+    childParameters: freeze(structuredClone(childParameters)),
+    sourceContext,
     implementation
   });
 }
@@ -112,7 +114,9 @@ var ComponentCollection = class {
           parameters: structuredClone(component.parameters),
           presentationDefaults: [...component.presentationDefaults],
           dataScope: component.dataScope,
-          command: component.command
+          command: component.command,
+          ...Object.keys(component.childParameters).length ? { childParameters: structuredClone(component.childParameters) } : {},
+          ...component.sourceContext ? { sourceContext: true } : {}
         } }
       }]))
     };
@@ -220,15 +224,848 @@ function projectParameters(element, attrs) {
   return Object.fromEntries(Object.entries(attrs).filter(([name]) => !Object.hasOwn(element.parameters, name)));
 }
 
+// node_modules/@gramlot/gramlot/src/components/container.js
+function Container(HTMLElement) {
+  return class extends HTMLElement {
+    constructor() {
+      super();
+      const shadow = this.attachShadow({ mode: "open" });
+      const style = this.ownerDocument.createElement("style");
+      style.textContent = `:host{display:block;min-width:0;font:inherit;color:var(--gramlot-ink,CanvasText)}
+                *,*::before,*::after{box-sizing:border-box}.control-box{min-width:0}slot{display:contents}
+                ::slotted(*){min-width:0;max-width:100%}`;
+      this.controlBox = this.ownerDocument.createElement("div");
+      this.controlBox.className = "control-box";
+      this.control = this.controlBox;
+      this.control.id = "control";
+      this.control.append(this.ownerDocument.createElement("slot"));
+      shadow.append(style, this.controlBox);
+    }
+    projectAttributes(attrs) {
+      return projectParameters(this, attrs);
+    }
+  };
+}
+Container.parameters = {};
+
+// node_modules/@gramlot/gramlot/src/components/border-container.js
+var SIDES = ["top", "bottom", "left", "right"];
+var REGIONS = [...SIDES, "center"];
+var borderRegions = /* @__PURE__ */ new WeakMap();
+var horizontal = (side) => side === "top" || side === "bottom";
+function projectBorderChild(element, attrs, { adapt, invoke, publish, publishParent }) {
+  const rest = { ...attrs }, splitter = {}, drawer = {};
+  for (const [name, value] of Object.entries(rest)) {
+    for (const [prefix, group] of [["splitter_", splitter], ["drawer_", drawer]]) {
+      if (name.startsWith(prefix)) {
+        group[name.slice(prefix.length)] = value;
+        delete rest[name];
+      }
+    }
+  }
+  const region = rest.region;
+  if (!REGIONS.includes(region)) throw new TypeError(`Invalid border region: ${region}`);
+  const min = rest.minSize ?? 0, max = rest.maxSize ?? Infinity;
+  if (typeof min !== "number" || typeof max !== "number" || !Number.isFinite(min) || min < 0 || max < min || Number.isNaN(max)) {
+    throw new TypeError("Border minSize/maxSize must be nonnegative pixel limits, with maxSize >= minSize");
+  }
+  if (![void 0, null, false, true, "close"].includes(rest.drawer)) throw new TypeError("drawer must be true, false or close");
+  const probe = element.ownerDocument.createElement("div");
+  probe.style.cssText = rest.style ?? "";
+  const size = probe.style[horizontal(region) ? "height" : "width"];
+  probe.style.width = "100%";
+  probe.style.height = "100%";
+  rest.style = probe.style.cssText;
+  const { label, icon, minimize = true, onclick, ...drawerStyle } = drawer;
+  if (typeof minimize !== "boolean") throw new TypeError("drawer_minimize must be a boolean");
+  const drawerAttrs = adapt(drawerStyle);
+  const drawerProbe = element.ownerDocument.createElement("div");
+  drawerProbe.style.cssText = drawerAttrs.style ?? "";
+  const background = drawerProbe.style.backgroundColor;
+  if (background) drawerProbe.style.setProperty("--gramlot-drawer-background", background);
+  if (drawerAttrs.style != null) drawerAttrs.style = drawerProbe.style.cssText;
+  borderRegions.set(element, {
+    region,
+    size,
+    min,
+    max,
+    splitter: rest.splitter === true,
+    drawer: rest.drawer,
+    hidden: rest.hidden === true,
+    splitterAttrs: adapt(splitter),
+    drawerAttrs,
+    label,
+    icon,
+    minimize,
+    notifications: {
+      closableChange: (payload) => publish("closable_change", payload),
+      splitterResize: (payload) => publishParent("splitter_resize", payload)
+    },
+    onToggle: onclick ? (evt, show) => invoke("drawer_onclick", onclick, { evt, show }) : null
+  });
+  for (const key of ["region", "splitter", "drawer", "minSize", "maxSize"]) delete rest[key];
+  rest.slot = region;
+  if (element.parentElement?.constructor.gramlotComponent?.name === "borderContainer") element.parentElement.projectRegion(element);
+  return rest;
+}
+function applyAttributes(element, attrs, previous) {
+  for (const key of /* @__PURE__ */ new Set([...Object.keys(previous), ...Object.keys(attrs)])) {
+    if (attrs[key] == null) element.removeAttribute(key);
+    else element.setAttribute(key, String(attrs[key]));
+  }
+  return attrs;
+}
+var ContentPane = defineComponent({
+  name: "contentPane",
+  tag: "gramlot-content-pane",
+  base: Container,
+  subTags: "*",
+  implementation: (Base) => class extends Base {
+    constructor() {
+      super();
+      const style = this.ownerDocument.createElement("style");
+      style.textContent = ":host{min-height:0;overflow:auto}.control-box{height:100%;min-height:0}";
+      this.shadowRoot.append(style);
+    }
+  }
+});
+var BorderContainer = defineComponent({
+  name: "borderContainer",
+  tag: "gramlot-border-container",
+  base: Container,
+  subTags: "*",
+  childParameters: { region: { required: true, enum: REGIONS, unique: true }, drawer_onclick: { inline: ["evt", "show"] } },
+  parameters: {
+    design: { dtype: "T", default: "headline", binding: "read", enum: ["headline", "sidebar"] },
+    persist: { dtype: "B", default: false, binding: "read" }
+  },
+  implementation: (Base) => class extends Base {
+    static projectChild(element, attrs, context) {
+      return projectBorderChild(element, attrs, context);
+    }
+    #regions = /* @__PURE__ */ new Map();
+    #observer;
+    #contentObserver;
+    #drag;
+    constructor() {
+      super();
+      this.control.replaceChildren();
+      const doc = this.ownerDocument;
+      this.#contentObserver = new doc.defaultView.ResizeObserver((entries) => {
+        for (const { target } of entries) {
+          const region = target.closest(".region");
+          region.style.setProperty("--drawer-content-width", `${target.offsetWidth}px`);
+          region.style.setProperty("--drawer-content-height", `${target.offsetHeight}px`);
+        }
+      });
+      const style = doc.createElement("style");
+      style.textContent = `:host{min-height:0;overflow:hidden}
+                .control-box{height:100%;min-height:0;display:grid;
+                    grid-template-columns:var(--left,0px) minmax(0,1fr) var(--right,0px);
+                    grid-template-rows:var(--top,0px) minmax(0,1fr) var(--bottom,0px);
+                    grid-template-areas:'top top top' 'left center right' 'bottom bottom bottom'}
+                .control-box[data-design=sidebar]{grid-template-areas:'left top right' 'left center right' 'left bottom right'}
+                .region{position:relative;min-width:0;min-height:0;overflow:visible}
+                .viewport{height:100%;min-width:0;min-height:0;overflow:auto}
+                .region[data-side=left]>.viewport{padding-right:var(--region-splitter,0px)}
+                .region[data-side=right]>.viewport{padding-left:var(--region-splitter,0px)}
+                .region[data-side=top]>.viewport{padding-bottom:var(--region-splitter,0px)}
+                .region[data-side=bottom]>.viewport{padding-top:var(--region-splitter,0px)}
+                .viewport[hidden]{display:none}::slotted(*){min-height:0}
+                .separator{position:absolute;z-index:2;touch-action:none;user-select:none;background:var(--gramlot-splitter-background,var(--gramlot-border-control,#aaa))}
+                .separator[data-axis=x]{top:0;bottom:0;width:var(--gramlot-splitter-size,1px);cursor:col-resize}
+                .separator[data-axis=y]{left:0;right:0;height:var(--gramlot-splitter-size,1px);cursor:row-resize}
+                .separator[data-side=left]{right:0}.separator[data-side=right]{left:0}
+                .separator[data-side=top]{bottom:0}.separator[data-side=bottom]{top:0}
+                .separator:hover{background:var(--gramlot-splitter-hover,#91a4bd)}
+                .separator::before{content:'';position:absolute;inset:0}
+                .separator[data-axis=x]::before{left:calc((100% - max(100%,var(--gramlot-touch-target,12px))) / 2);width:max(100%,var(--gramlot-touch-target,12px))}
+                .separator[data-axis=y]::before{top:calc((100% - max(100%,var(--gramlot-touch-target,12px))) / 2);height:max(100%,var(--gramlot-touch-target,12px))}
+                .separator[data-draggable=false]{cursor:default;background:transparent}
+                .separator[data-draggable=false]::before{display:none}
+                .separator[data-axis=x][data-draggable=false]{width:0!important}
+                .separator[data-axis=y][data-draggable=false]{height:0!important}
+                .separator:focus-visible{outline:2px solid var(--gramlot-focus-ring,Highlight);outline-offset:1px}
+                .drawer{position:absolute;z-index:3;cursor:pointer;appearance:none;font:inherit;
+                    font-size:var(--gramlot-drawer-font-size,11px);line-height:1.2;white-space:nowrap;
+                    --drawer-background:var(--gramlot-drawer-background,#777);
+                    color:var(--gramlot-drawer-color,hsl(from var(--drawer-background) 0 0 clamp(20,calc((60 - l) * 1000),100)));
+                    background:var(--drawer-background);outline:none;
+                    border:0;border-radius:0;box-shadow:none;
+                    min-width:0;min-height:0;padding:0;
+                    opacity:var(--gramlot-drawer-opacity,.45);
+                    transition:opacity var(--gramlot-drawer-duration,.16s) var(--gramlot-drawer-easing,ease-out),
+                        transform var(--gramlot-drawer-duration,.16s) var(--gramlot-drawer-easing,ease-out),
+                        width var(--gramlot-drawer-duration,.16s) var(--gramlot-drawer-easing,ease-out),
+                        height var(--gramlot-drawer-duration,.16s) var(--gramlot-drawer-easing,ease-out),
+                        max-width var(--gramlot-drawer-duration,.16s) var(--gramlot-drawer-easing,ease-out),
+                        max-height var(--gramlot-drawer-duration,.16s) var(--gramlot-drawer-easing,ease-out),
+                        margin var(--gramlot-drawer-duration,.16s) var(--gramlot-drawer-easing,ease-out)}
+                .drawer:hover,.drawer:focus-visible{opacity:var(--gramlot-drawer-active-opacity,1)}
+                [data-axis=x]>.drawer[data-resizable]{cursor:col-resize}
+                [data-axis=y]>.drawer[data-resizable]{cursor:row-resize}
+                @media (hover:hover){
+                    [data-axis=x]>.drawer:hover{transform:scale(var(--gramlot-drawer-hover-cross-scale,1.75),var(--gramlot-drawer-hover-length-scale,1.12))}
+                    [data-axis=y]>.drawer:hover{transform:scale(var(--gramlot-drawer-hover-length-scale,1.12),var(--gramlot-drawer-hover-cross-scale,1.75))}
+                    .separator>.drawer:is([data-labelled],[data-icon]):hover{transform:scale(var(--gramlot-drawer-label-hover-scale,1.04))}
+                }
+                
+                [data-axis=x]>.drawer{--drawer-closed-width:var(--gramlot-drawer-thickness,4px);--drawer-closed-height:var(--gramlot-drawer-length,28px);
+                    top:50%;margin-top:calc(var(--gramlot-drawer-length,28px) / -2);width:var(--drawer-closed-width);height:var(--drawer-closed-height)}
+                [data-axis=y]>.drawer{--drawer-closed-width:var(--gramlot-drawer-length,28px);--drawer-closed-height:var(--gramlot-drawer-thickness,4px);
+                    left:50%;margin-left:calc(var(--gramlot-drawer-length,28px) / -2);width:var(--drawer-closed-width);height:var(--drawer-closed-height)}
+                .drawer::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
+                    width:max(100%,var(--gramlot-touch-target,var(--gramlot-drawer-hit-target,12px)));height:max(100%,var(--gramlot-touch-target,var(--gramlot-drawer-hit-target,12px)))}
+                .drawer{--drawer-reveal-width:var(--gramlot-drawer-reveal-width,var(--drawer-content-width,0px));--drawer-reveal-height:var(--gramlot-drawer-reveal-height,var(--drawer-content-height,0px))}
+                .drawer[data-labelled]{opacity:var(--gramlot-drawer-active-opacity,1)}
+                [data-side=left]>.drawer{transform-origin:left center;left:100%;border-left:0;border-radius:0 var(--gramlot-radius-sm,4px) var(--gramlot-radius-sm,4px) 0}
+                [data-side=right]>.drawer{transform-origin:right center;right:100%;border-right:0;border-radius:var(--gramlot-radius-sm,4px) 0 0 var(--gramlot-radius-sm,4px)}
+                [data-side=top]>.drawer{transform-origin:center top;top:100%;border-top:0;border-radius:0 0 var(--gramlot-radius-sm,4px) var(--gramlot-radius-sm,4px)}
+                [data-side=bottom]>.drawer{transform-origin:center bottom;bottom:100%;border-bottom:0;border-radius:var(--gramlot-radius-sm,4px) var(--gramlot-radius-sm,4px) 0 0}
+                .drawer:is([data-labelled],[data-icon]){width:max-content;height:max-content;padding:0}
+                .drawer-viewport{display:block;overflow:hidden;min-width:0;min-height:0;max-width:inherit;max-height:inherit}
+                .drawer-content{display:flex;width:max-content;height:max-content;align-items:center;gap:var(--gramlot-drawer-content-gap,4px);box-sizing:border-box;
+                    padding:var(--gramlot-drawer-padding,2px 8px);overflow:hidden;pointer-events:none;
+                    min-width:0;min-height:0}
+                .drawer-icon{display:block;flex:none;font-size:var(--gramlot-drawer-icon-size,1em);line-height:1}
+                .drawer-icon[hidden],.drawer-label:empty{display:none}
+                .drawer-label{display:block;flex:none;pointer-events:none}
+                .drawer-rotated .drawer-content{flex-direction:column;padding:var(--gramlot-drawer-padding,8px 2px)}
+                .drawer-rotated .drawer-label{writing-mode:vertical-rl;text-orientation:mixed}
+                .separator[data-axis=x]>.drawer.drawer-rotated{margin-top:0;translate:0 -50%}
+                /* Icon and caption reveal as one unit; the resting grip stays thin. */
+                .separator>.drawer.drawer-reveal:is([data-labelled],[data-icon]){--drawer-open:var(--gramlot-drawer-reveal,0);
+                    opacity:calc(var(--gramlot-drawer-opacity,.45) + (var(--gramlot-drawer-active-opacity,1) - var(--gramlot-drawer-opacity,.45)) * var(--drawer-open));
+                    display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
+                    min-width:0;min-height:0;
+                    max-width:calc(var(--drawer-closed-width) + (var(--drawer-reveal-width) - var(--drawer-closed-width)) * var(--drawer-open));
+                    max-height:calc(var(--drawer-closed-height) + (var(--drawer-reveal-height) - var(--drawer-closed-height)) * var(--drawer-open))}
+                .separator[data-axis=x]>.drawer.drawer-reveal{margin-top:0;translate:0 -50%}
+                [data-axis=y]>.drawer:is([data-labelled],[data-icon]){margin-left:0;translate:-50% 0}
+                .drawer-reveal .drawer-content{opacity:var(--drawer-open);
+                    transition:opacity var(--gramlot-drawer-duration,.16s) var(--gramlot-drawer-easing,ease-out)}
+                @media (hover:none),(pointer:coarse){.separator>.drawer.drawer-reveal:is([data-labelled],[data-icon]){--drawer-open:1}}
+                @media (hover:hover){.separator>.drawer.drawer-reveal:is([data-labelled],[data-icon]):hover{--drawer-open:1;transform:scale(var(--gramlot-drawer-label-hover-scale,1.04))}}
+                .separator>.drawer:is([data-labelled],[data-icon]):is(:active,[data-active]){transform:scale(var(--gramlot-drawer-label-hover-scale,1.04))}
+                .separator>.drawer.drawer-reveal:is([data-labelled],[data-icon]):is(:focus-visible,:active,[data-active]){--drawer-open:1;transform:scale(var(--gramlot-drawer-label-hover-scale,1.04))}
+                @media (prefers-reduced-motion:reduce){.drawer,.drawer-reveal .drawer-content{transition:none}}
+                .drawer[hidden],.separator[hidden]{display:none}
+                .drag-cover{position:absolute;inset:0;z-index:4;display:none}
+                :host{position:relative}.drag-cover[data-active]{display:block}`;
+      for (const side of REGIONS) {
+        const cell = doc.createElement("div");
+        cell.className = "region";
+        cell.style.gridArea = side;
+        const viewport = doc.createElement("div");
+        viewport.className = "viewport";
+        cell.dataset.side = side;
+        viewport.id = `region-${side}`;
+        const slot = doc.createElement("slot");
+        slot.name = side;
+        viewport.append(slot);
+        cell.append(viewport);
+        const state = { cell, viewport, child: null, config: null, visibility: null, closed: false, suppressDrawerClick: false, size: null, splitterAttrs: {}, drawerAttrs: {} };
+        if (side !== "center") {
+          const separator = doc.createElement("div");
+          separator.className = "separator";
+          separator.dataset.side = side;
+          separator.dataset.axis = horizontal(side) ? "y" : "x";
+          separator.setAttribute("role", "separator");
+          separator.setAttribute("aria-label", `Resize ${side} region`);
+          separator.setAttribute("aria-orientation", horizontal(side) ? "horizontal" : "vertical");
+          separator.setAttribute("aria-controls", viewport.id);
+          const drawer = doc.createElement("button");
+          drawer.type = "button";
+          drawer.className = "drawer";
+          drawer.setAttribute("aria-controls", viewport.id);
+          const drawerIcon = doc.createElement("span");
+          drawerIcon.className = "drawer-icon";
+          drawerIcon.setAttribute("aria-hidden", "true");
+          const drawerLabel = doc.createElement("span");
+          drawerLabel.className = "drawer-label";
+          const drawerContent = doc.createElement("span");
+          drawerContent.className = "drawer-content";
+          const drawerViewport = doc.createElement("span");
+          drawerViewport.className = "drawer-viewport";
+          drawerContent.append(drawerIcon, drawerLabel);
+          drawerViewport.append(drawerContent);
+          drawer.append(drawerViewport);
+          separator.append(drawer);
+          cell.append(separator);
+          drawer.addEventListener("pointerdown", (evt) => {
+            if (evt.button === 0) drawer.setAttribute("data-active", "");
+          });
+          for (const event of ["pointerup", "pointercancel", "lostpointercapture", "pointerleave"]) {
+            drawer.addEventListener(event, (evt) => {
+              if (event !== "pointerleave" || !drawer.hasPointerCapture(evt.pointerId)) drawer.removeAttribute("data-active");
+            });
+          }
+          Object.assign(state, { separator, drawer, drawerIcon, drawerLabel, drawerContent });
+          separator.addEventListener("pointerdown", (evt) => this.#startDrag(side, evt));
+          separator.addEventListener("keydown", (evt) => this.#keyResize(side, evt));
+          drawer.addEventListener("click", (evt) => {
+            evt.stopPropagation();
+            if (state.suppressDrawerClick && evt.detail !== 0) {
+              state.suppressDrawerClick = false;
+              return;
+            }
+            state.closed = !state.closed;
+            this.#render(side);
+            state.config.onToggle?.(evt, !state.closed);
+          });
+        }
+        this.#regions.set(side, state);
+        this.control.append(cell);
+        slot.addEventListener("slotchange", () => this.#sync());
+      }
+      this.cover = doc.createElement("div");
+      this.cover.className = "drag-cover";
+      this.shadowRoot.append(style, this.cover);
+      this.#observer = new doc.defaultView.MutationObserver(() => this.#sync());
+    }
+    connectedCallback() {
+      this.#observer.observe(this, { childList: true });
+      for (const state of this.#regions.values()) if (state.drawerContent) this.#contentObserver.observe(state.drawerContent);
+      this.#sync();
+    }
+    disconnectedCallback() {
+      this.#observer.disconnect();
+      this.#contentObserver.disconnect();
+      this.#stopDrag();
+    }
+    projectAttributes(attrs, adapt) {
+      const rest = super.projectAttributes(attrs, adapt);
+      if (!["headline", "sidebar"].includes(this.parameters.design)) throw new TypeError("Invalid border design");
+      if (Object.hasOwn(attrs, "liveSplitters")) throw new TypeError("Border splitters are always live; omit liveSplitters");
+      if (this.parameters.persist && !attrs.id) throw new TypeError("Persistent borderContainer requires a stable id");
+      this.control.dataset.design = this.parameters.design;
+      return rest;
+    }
+    #sync() {
+      const children = /* @__PURE__ */ new Map();
+      for (const child of this.children) {
+        const config = borderRegions.get(child);
+        if (!config) continue;
+        if (children.has(config.region)) throw new Error(`Duplicate border region: ${config.region}`);
+        children.set(config.region, child);
+      }
+      for (const [side, state] of this.#regions) {
+        const child = children.get(side) ?? null;
+        if (state.child !== child) {
+          if (this.#drag?.side === side) this.#stopDrag();
+          state.child = child;
+          state.config = null;
+          state.visibility = null;
+          state.size = null;
+          state.closed = false;
+        }
+        if (child) this.projectRegion(child);
+        else {
+          state.config = null;
+          this.#render(side);
+        }
+      }
+    }
+    projectRegion(child) {
+      const config = borderRegions.get(child), side = config.region, state = this.#regions.get(side);
+      if (state.child !== child) {
+        this.#sync();
+        return;
+      }
+      const before = state.config;
+      if (!before || before.size !== config.size) {
+        state.size = config.size || "auto";
+        if (!before && this.parameters.persist) {
+          const saved = this.ownerDocument.cookie.split("; ").find((item) => item.startsWith(`${this.#cookie(side)}=`));
+          if (saved) state.size = decodeURIComponent(saved.split("=").slice(1).join("="));
+        }
+      }
+      if (!before || before.drawer !== config.drawer) state.closed = config.drawer === "close";
+      state.config = config;
+      if (side !== "center") {
+        state.splitterAttrs = applyAttributes(state.separator, config.splitterAttrs, state.splitterAttrs);
+        state.drawerAttrs = applyAttributes(state.drawer, config.drawerAttrs, state.drawerAttrs);
+        state.separator.classList.add("separator");
+        state.drawer.classList.add("drawer");
+        state.drawer.classList.toggle("drawer-reveal", config.minimize);
+        state.drawer.classList.toggle("drawer-rotated", !horizontal(side));
+        state.drawerLabel.innerHTML = config.label ?? "";
+        state.drawerIcon.textContent = config.icon ?? "";
+        state.drawerIcon.hidden = !config.icon;
+        state.drawer.toggleAttribute("data-icon", !!config.icon);
+        state.drawer.toggleAttribute("data-labelled", !!config.label);
+      }
+      this.#render(side);
+    }
+    #render(side) {
+      const state = this.#regions.get(side), c = state.config;
+      const visible = !!c && !c.hidden && !state.closed;
+      const previous = state.visibility;
+      state.visibility = c ? { open: visible, drawer: !!c.drawer } : null;
+      state.viewport.hidden = !visible;
+      if (side === "center") return;
+      this.control.style.setProperty(`--${side}`, visible ? state.size : "0px");
+      state.separator.hidden = !c || c.hidden || !c.splitter && !c.drawer;
+      const draggable = visible && c.splitter;
+      state.cell.style.setProperty("--region-splitter", draggable ? state.separator.style[horizontal(side) ? "height" : "width"] || "var(--gramlot-splitter-size,1px)" : "0px");
+      state.separator.dataset.draggable = String(!!draggable);
+      state.separator.setAttribute("role", draggable ? "separator" : "presentation");
+      state.separator.tabIndex = draggable ? 0 : -1;
+      state.drawer.hidden = !c?.drawer;
+      state.drawer.toggleAttribute("data-resizable", !!c?.splitter);
+      state.drawer.setAttribute("aria-expanded", String(visible));
+      state.drawer.setAttribute("aria-label", `${visible ? "Close" : "Open"} ${side} region`);
+      state.drawer.title = c?.drawerAttrs.title ?? state.drawer.getAttribute("aria-label");
+      state.separator.setAttribute("aria-valuemin", String(c?.min ?? 0));
+      state.separator.setAttribute("aria-valuenow", String(Math.round(this.#extent(side))));
+      if (c && Number.isFinite(c.max)) state.separator.setAttribute("aria-valuemax", String(c.max));
+      else state.separator.removeAttribute("aria-valuemax");
+      if (c && previous && (previous.drawer || c.drawer) && previous.open !== visible) {
+        c.notifications.closableChange({ open: visible, region: side });
+      }
+    }
+    #extent(side) {
+      const box = this.#regions.get(side).cell.getBoundingClientRect();
+      return horizontal(side) ? box.height : box.width;
+    }
+    #resize(side, desired) {
+      const state = this.#regions.get(side), c = state.config;
+      const opposite = { left: "right", right: "left", top: "bottom", bottom: "top" }[side];
+      const box = this.control.getBoundingClientRect();
+      const available = Math.max(0, (horizontal(side) ? box.height : box.width) - this.#extent(opposite));
+      const size = Math.max(Math.min(c.min, available), Math.min(desired, c.max, available));
+      state.size = `${size}px`;
+      this.#render(side);
+    }
+    #keyResize(side, evt) {
+      const state = this.#regions.get(side);
+      if (evt.target !== state.separator || !state.config?.splitter || state.closed) return;
+      const keys = horizontal(side) ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
+      if (!keys.includes(evt.key)) return;
+      evt.preventDefault();
+      const sign = ["left", "top"].includes(side) ? 1 : -1;
+      const previousSize = this.#extent(side);
+      this.#resize(side, previousSize + (evt.key === keys[0] ? -1 : 1) * sign);
+      this.#commitResize(side, previousSize);
+    }
+    #startDrag(side, evt) {
+      const state = this.#regions.get(side);
+      if (evt.button !== 0) return;
+      state.suppressDrawerClick = false;
+      if (!state.config?.splitter) return;
+      const fromDrawer = state.drawer.contains(evt.target);
+      if (!fromDrawer) evt.preventDefault();
+      this.#stopDrag();
+      const axis = horizontal(side) ? "clientY" : "clientX", start = evt[axis], size = this.#extent(side);
+      const sign = ["left", "top"].includes(side) ? 1 : -1;
+      const controller = new this.ownerDocument.defaultView.AbortController();
+      const captureTarget = fromDrawer ? state.drawer : state.separator, pointerId = evt.pointerId;
+      let resizing = !fromDrawer;
+      this.#drag = { side, controller, captureTarget, pointerId };
+      captureTarget.setPointerCapture(pointerId);
+      if (resizing) this.cover.setAttribute("data-active", "");
+      const options = { signal: controller.signal };
+      captureTarget.addEventListener("pointermove", (event) => {
+        if (event.pointerId !== pointerId) return;
+        const distance = event[axis] - start;
+        if (!resizing && Math.abs(distance) < 4) return;
+        state.suppressDrawerClick = fromDrawer;
+        if (state.closed && sign * distance <= 0) return;
+        const opening = state.closed;
+        state.closed = false;
+        resizing = true;
+        this.cover.setAttribute("data-active", "");
+        this.#resize(side, size + sign * distance);
+        if (opening) state.config.onToggle?.(event, true);
+      }, options);
+      const finish = (event) => {
+        if (event.pointerId !== pointerId) return;
+        this.#stopDrag();
+        if (resizing) this.#commitResize(side, size);
+      };
+      captureTarget.addEventListener("pointerup", finish, options);
+      captureTarget.addEventListener("pointercancel", finish, options);
+      captureTarget.addEventListener("lostpointercapture", finish, options);
+    }
+    #stopDrag() {
+      if (!this.#drag) return;
+      const { controller, captureTarget, pointerId } = this.#drag;
+      this.#drag = null;
+      controller.abort();
+      this.cover.removeAttribute("data-active");
+      if (captureTarget.hasPointerCapture(pointerId)) captureTarget.releasePointerCapture(pointerId);
+    }
+    #commitResize(side, previousSize) {
+      const state = this.#regions.get(side), size = this.#extent(side);
+      if (size === previousSize) return;
+      this.#save(side);
+      state.config.notifications.splitterResize({ region: side, size: `${size}px`, previousSize: `${previousSize}px` });
+    }
+    #cookie(side) {
+      return encodeURIComponent(`gramlot-border-${this.id}-${side}`);
+    }
+    #save(side) {
+      if (this.parameters.persist) this.ownerDocument.cookie = `${this.#cookie(side)}=${encodeURIComponent(this.#regions.get(side).size)}; Path=/; SameSite=Lax`;
+    }
+  }
+});
+
+// node_modules/@gramlot/gramlot/src/components/selected-container.js
+var selectionPanels = /* @__PURE__ */ new WeakMap();
+var panelSequence = 0;
+function projectSelectionChild(element, attrs, actions) {
+  const { pageName = null, title = "", icon = "", badge = null, badge_color = "", closable = false, onClose, hidden = false, disabled = false, ...rest } = attrs;
+  if (pageName !== null && typeof pageName !== "string") throw new TypeError("pageName must be a string");
+  if (typeof closable !== "boolean") throw new TypeError("closable must be a boolean");
+  const slot = selectionPanels.get(element)?.slot ?? `panel-${++panelSequence}`;
+  selectionPanels.set(element, {
+    pageName,
+    title,
+    icon,
+    badge,
+    badge_color,
+    closable,
+    hidden,
+    disabled,
+    slot,
+    remove: actions.remove,
+    allowClose: () => onClose == null ? true : actions.invoke("onClose", onClose, {})
+  });
+  rest.slot = slot;
+  if (element.parentElement) element.parentElement.scheduleSelection();
+  return rest;
+}
+function SelectedContainer(HTMLElement) {
+  return class extends Container(HTMLElement) {
+    static projectChild(element, attrs, actions) {
+      return projectSelectionChild(element, attrs, actions);
+    }
+    #panels = /* @__PURE__ */ new Map();
+    #selected = null;
+    #initialized = false;
+    #scheduled = false;
+    #requested = { selectedPage: null, selected: null };
+    #observer;
+    #context;
+    constructor() {
+      super();
+      this.control.replaceChildren();
+      this.control.className = "control-box selection";
+      const style = this.ownerDocument.createElement("style");
+      style.textContent = `:host{min-height:0;overflow:hidden}.selection{height:100%;min-height:0;display:flex;flex-direction:column}
+                .panels{flex:1;min-height:0;min-width:0;position:relative}.panel{height:100%;min-height:0;overflow:auto}
+                .panel[hidden]{display:none}::slotted(*){height:100%;min-height:0}`;
+      this.panelArea = this.ownerDocument.createElement("div");
+      this.panelArea.className = "panels";
+      this.control.append(this.panelArea);
+      this.shadowRoot.append(style);
+      this.#observer = new this.ownerDocument.defaultView.MutationObserver(() => this.scheduleSelection());
+    }
+    setSourceContext(context) {
+      this.#context = context;
+    }
+    connectedCallback() {
+      this.#observer.observe(this, { childList: true });
+      this.scheduleSelection();
+    }
+    disconnectedCallback() {
+      this.#observer.disconnect();
+    }
+    scheduleSelection() {
+      if (this.#scheduled) return;
+      this.#scheduled = true;
+      queueMicrotask(() => {
+        this.#scheduled = false;
+        if (this.isConnected) this.#sync();
+      });
+    }
+    projectAttributes(attrs, adapt) {
+      const rest = super.projectAttributes(attrs, adapt);
+      const { selected, selectedPage } = this.parameters;
+      if (selected != null && (!Number.isInteger(selected) || selected < 0)) throw new TypeError("selected must be a nonnegative index or null");
+      if (selectedPage != null && typeof selectedPage !== "string") throw new TypeError("selectedPage must be a string or null");
+      this.scheduleSelection();
+      return rest;
+    }
+    #sync() {
+      const records = [], names = /* @__PURE__ */ new Set();
+      for (const child of this.children) {
+        const config = selectionPanels.get(child);
+        if (!config) continue;
+        if (config.pageName != null && names.has(config.pageName)) throw new Error(`Duplicate pageName: ${config.pageName}`);
+        names.add(config.pageName);
+        let record = this.#panels.get(child);
+        if (!record) {
+          const viewport = this.ownerDocument.createElement("div");
+          viewport.className = "panel";
+          viewport.hidden = true;
+          viewport.id = config.slot;
+          viewport.setAttribute("role", "group");
+          const slot = this.ownerDocument.createElement("slot");
+          slot.name = config.slot;
+          viewport.append(slot);
+          this.panelArea.append(viewport);
+          record = { child, viewport, config, index: records.length };
+          this.#panels.set(child, record);
+        }
+        record.config = config;
+        records.push(record);
+      }
+      const previousIndex = this.#selected?.index ?? 0;
+      for (const [child, record] of this.#panels) {
+        if (!records.includes(record)) {
+          record.viewport.remove();
+          this.#panels.delete(child);
+        }
+      }
+      records.forEach((record, index) => {
+        record.index = index;
+      });
+      this.#panels = new Map(records.map((record) => [record.child, record]));
+      const { selectedPage, selected } = this.parameters;
+      const nameChanged = !Object.is(selectedPage, this.#requested.selectedPage);
+      const indexChanged = !Object.is(selected, this.#requested.selected);
+      this.#requested = { selectedPage, selected };
+      const available = (record) => record && !record.config.hidden && !record.config.disabled;
+      let target = this.#selected;
+      if (!this.#initialized || nameChanged || indexChanged) {
+        const requested = nameChanged || !this.#initialized && selectedPage != null ? records.find((record) => record.config.pageName === selectedPage) : records[selected];
+        if (available(requested)) target = requested;
+      }
+      if (!records.includes(target) || !available(target)) {
+        target = records.slice(previousIndex).find(available) ?? records.slice(0, previousIndex).reverse().find(available) ?? null;
+      }
+      this.renderTabs(records, target);
+      if (records.length || this.#initialized) this.#select(target);
+    }
+    renderTabs() {
+    }
+    selectPanel(record) {
+      if (record.config.hidden || record.config.disabled) return;
+      this.#select(record);
+    }
+    #payload(record, selected) {
+      const page = record.config.pageName ?? record.index;
+      return { page, index: record.index, selected, change: `${page}_${selected ? "show" : "hide"}` };
+    }
+    #writeSelection(target) {
+      this.#context.writeParameter("selectedPage", target?.config.pageName ?? null);
+      this.#context.writeParameter("selected", target?.index ?? null);
+    }
+    #select(target) {
+      const previous = this.#selected, initial = !this.#initialized;
+      if (!initial && target === previous) {
+        this.#writeSelection(target);
+        return;
+      }
+      if (!initial) {
+        if (previous) this.#context.publish("hiding", { pageName: previous.config.pageName, index: previous.index });
+        if (target) this.#context.publish("showing", { pageName: target.config.pageName, index: target.index });
+      }
+      this.#selected = target;
+      this.#initialized = true;
+      for (const record of this.#panels.values()) record.viewport.hidden = record !== target;
+      this.renderTabs([...this.#panels.values()], target);
+      this.#writeSelection(target);
+      if (!initial && previous) this.#context.publish("selected", this.#payload(previous, false));
+      if (target) this.#context.publish("selected", this.#payload(target, true));
+    }
+    closePanel(record) {
+      if (!record.config.closable) return;
+      const allowed = record.config.allowClose();
+      if (typeof allowed !== "boolean") throw new TypeError("onClose must return a synchronous boolean");
+      if (!allowed) return;
+      const payload = { pageName: record.config.pageName, index: record.index, wasSelected: record === this.#selected };
+      this.#context.publish("closing", payload);
+      record.config.remove();
+      this.#sync();
+      this.#context.publish("closed", payload);
+    }
+  };
+}
+SelectedContainer.parameters = {
+  selectedPage: { dtype: "T", default: null, nullable: true, binding: "twoWay" },
+  selected: { dtype: "L", default: null, nullable: true, binding: "twoWay" }
+};
+var selectionChildParameters = { onClose: { inline: [] } };
+var StackContainer = defineComponent({
+  name: "stackContainer",
+  tag: "gramlot-stack-container",
+  base: SelectedContainer,
+  subTags: "*",
+  sourceContext: true,
+  childParameters: selectionChildParameters,
+  implementation: (Base) => class extends Base {
+  }
+});
+var TabContainer = defineComponent({
+  name: "tabContainer",
+  tag: "gramlot-tab-container",
+  base: SelectedContainer,
+  subTags: "*",
+  sourceContext: true,
+  childParameters: selectionChildParameters,
+  parameters: {
+    tabMode: { dtype: "T", default: "tabs", binding: "read", enum: ["tabs", "underline"] },
+    tabPosition: { dtype: "T", default: "top", binding: "read", enum: ["top", "bottom", "left", "right"] },
+    tabAlign: { dtype: "T", default: "start", binding: "read", enum: ["start", "center", "end"] }
+  },
+  implementation: (Base) => class extends Base {
+    #tabs = /* @__PURE__ */ new Map();
+    constructor() {
+      super();
+      const doc = this.ownerDocument;
+      this.tabStrip = doc.createElement("div");
+      this.tabStrip.className = "tabs";
+      this.tabStrip.setAttribute("role", "tablist");
+      this.control.prepend(this.tabStrip);
+      const style = doc.createElement("style");
+      style.textContent = `
+                .selection{min-width:0;--tab-border:var(--gramlot-tab-border,var(--gramlot-border,#aaa));
+                    --tab-radius:var(--gramlot-tab-radius,4px);--tab-indicator:var(--gramlot-tab-indicator-color,var(--gramlot-action,#3766b5))}
+                .panels{background:var(--gramlot-tab-selected-background,var(--gramlot-surface,white))}
+                .tabs{display:var(--gramlot-tab-strip-display,flex);flex:none;align-items:stretch;gap:var(--gramlot-tab-gap,3px);min-width:0;min-height:0;
+                    padding:var(--gramlot-tab-strip-padding,4px);overflow:auto;overscroll-behavior:contain;
+                    border-bottom:1px solid var(--tab-border);background:var(--gramlot-tab-background,var(--gramlot-surface-subtle,#eef1f5))}
+                [data-align=center] .tabs{justify-content:safe center}
+                [data-align=end] .tabs{justify-content:safe flex-end}
+                .tab-entry{position:relative;display:flex;flex:none;align-items:stretch;border:1px solid transparent;border-bottom:0;
+                    border-radius:var(--tab-radius) var(--tab-radius) 0 0;color:var(--gramlot-tab-color,var(--gramlot-text-secondary,#555))}
+                .tab-entry:has([aria-selected=true]){border-color:var(--tab-border);color:var(--gramlot-tab-selected-color,var(--gramlot-ink,#222));
+                    background:var(--gramlot-tab-selected-background,var(--gramlot-surface,white))}
+                button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--gramlot-tab-content-gap,.4em);
+                    font:inherit;line-height:1.2;color:inherit;border:0;background:transparent;cursor:pointer;white-space:nowrap;min-width:0;
+                    padding:var(--gramlot-tab-padding,4px 10px);min-height:max(var(--gramlot-touch-target,0px),var(--gramlot-tab-height,28px));border-radius:inherit}
+                button[aria-selected=true]{font-weight:600}
+                .icon,.badge{flex:none}.icon:empty{display:none}.caption{overflow:hidden;text-overflow:ellipsis}
+                .badge{font-size:var(--gramlot-tab-badge-size,.8em);font-weight:600;line-height:1.3;border-radius:999px;
+                    min-width:1.3em;padding:var(--gramlot-tab-badge-padding,0 .35em);text-align:center;
+                    background:var(--gramlot-tab-badge-background,var(--gramlot-brand-blue,#3766b5));color:var(--gramlot-tab-badge-color,white)}
+                @media(hover:hover){button:not(:disabled):hover{background:var(--gramlot-tab-hover-background,var(--gramlot-selected,#e8f1fc))}}
+                button:disabled{opacity:.5;cursor:default}
+                button:focus-visible{outline:2px solid var(--gramlot-focus-ring,Highlight);outline-offset:-3px}
+                .close{align-self:center;flex:none;min-height:var(--gramlot-touch-target,20px);min-width:var(--gramlot-touch-target,20px);
+                    padding:0;margin-inline-end:3px;border-radius:var(--tab-radius);font-size:1.15em}
+                [hidden]{display:none!important}
+                [data-position=top] .tabs{padding-bottom:0}
+                [data-position=bottom]{flex-direction:column-reverse}
+                [data-position=bottom] .tabs{border-bottom:0;border-top:1px solid var(--tab-border);padding-top:0}
+                [data-position=bottom] .tab-entry{border-bottom:1px solid transparent;border-top:0;border-radius:0 0 var(--tab-radius) var(--tab-radius)}
+                [data-position=left]{flex-direction:row}[data-position=right]{flex-direction:row-reverse}
+                :is([data-position=left],[data-position=right]) .tabs{flex-direction:column;max-width:min(40%,var(--gramlot-tab-side-width,12rem));border-bottom:0}
+                :is([data-position=left],[data-position=right]) button[role=tab]{flex:1;justify-content:flex-start}
+                [data-position=left] .tabs{border-right:1px solid var(--tab-border);padding-right:0}
+                [data-position=right] .tabs{border-left:1px solid var(--tab-border);padding-left:0}
+                [data-position=left] .tab-entry{border-bottom:1px solid transparent;border-right:0;border-radius:var(--tab-radius) 0 0 var(--tab-radius)}
+                [data-position=right] .tab-entry{border-bottom:1px solid transparent;border-left:0;border-radius:0 var(--tab-radius) var(--tab-radius) 0}
+                .tab-entry:has([aria-selected=true]){border-color:var(--tab-border)}
+                [data-mode=underline] .tabs{background:transparent}
+                [data-mode=underline] .tab-entry{border:0;border-radius:0;background:transparent}
+                [data-mode=underline] .tab-entry:has([aria-selected=true])::after{content:'';position:absolute;pointer-events:none;
+                    background:var(--tab-indicator);height:var(--gramlot-tab-indicator-size,2px);bottom:0;left:0;right:0}
+                [data-mode=underline][data-position=bottom] .tab-entry::after{top:0;bottom:auto}
+                [data-mode=underline]:is([data-position=left],[data-position=right]) .tab-entry::after{height:auto;width:var(--gramlot-tab-indicator-size,2px);top:0;bottom:0}
+                [data-mode=underline][data-position=left] .tab-entry::after{left:auto;right:0}
+                [data-mode=underline][data-position=right] .tab-entry::after{left:0;right:auto}`;
+      this.shadowRoot.append(style);
+    }
+    projectAttributes(attrs, adapt) {
+      const rest = super.projectAttributes(attrs, adapt);
+      const { tabMode, tabPosition, tabAlign } = this.parameters;
+      if (!["tabs", "underline"].includes(tabMode)) throw new TypeError("Invalid tabMode");
+      if (!["top", "bottom", "left", "right"].includes(tabPosition)) throw new TypeError("Invalid tabPosition");
+      if (!["start", "center", "end"].includes(tabAlign)) throw new TypeError("Invalid tabAlign");
+      this.control.dataset.mode = tabMode;
+      this.control.dataset.position = tabPosition;
+      this.control.dataset.align = tabAlign;
+      this.tabStrip.setAttribute("aria-orientation", ["left", "right"].includes(tabPosition) ? "vertical" : "horizontal");
+      return rest;
+    }
+    renderTabs(records, selected) {
+      for (const [record, entry] of this.#tabs) {
+        if (!records.includes(record)) {
+          entry.root.remove();
+          this.#tabs.delete(record);
+        }
+      }
+      for (const [index, record] of records.entries()) {
+        let entry = this.#tabs.get(record);
+        if (!entry) {
+          const doc = this.ownerDocument, root = doc.createElement("div"), button = doc.createElement("button"), close = doc.createElement("button");
+          root.className = "tab-entry";
+          button.type = close.type = "button";
+          button.setAttribute("role", "tab");
+          button.id = `tab-${record.config.slot}`;
+          button.setAttribute("aria-controls", record.viewport.id);
+          record.viewport.setAttribute("role", "tabpanel");
+          record.viewport.setAttribute("aria-labelledby", button.id);
+          const icon = doc.createElement("span"), caption2 = doc.createElement("span"), badge = doc.createElement("span");
+          icon.className = "icon";
+          icon.setAttribute("aria-hidden", "true");
+          caption2.className = "caption";
+          badge.className = "badge";
+          button.append(icon, caption2, badge);
+          close.className = "close";
+          close.textContent = "\xD7";
+          button.addEventListener("click", () => this.selectPanel(record));
+          close.addEventListener("click", () => {
+            this.closePanel(record);
+            if (!close.isConnected) this.tabStrip.querySelector("[aria-selected=true]")?.focus();
+          });
+          button.addEventListener("keydown", (event) => {
+            if (event.key === "Delete") {
+              event.preventDefault();
+              this.closePanel(record);
+              this.tabStrip.querySelector("[aria-selected=true]")?.focus();
+              return;
+            }
+            const vertical = ["left", "right"].includes(this.parameters.tabPosition);
+            const previous = vertical ? "ArrowUp" : "ArrowLeft", nextKey = vertical ? "ArrowDown" : "ArrowRight";
+            if (![previous, nextKey, "Home", "End"].includes(event.key)) return;
+            event.preventDefault();
+            const available = [...this.#tabs].filter(([r]) => !r.config.hidden && !r.config.disabled).sort(([a], [b]) => a.index - b.index);
+            let index2 = available.findIndex(([r]) => r === record);
+            index2 = event.key === "Home" ? 0 : event.key === "End" ? available.length - 1 : (index2 + (event.key === nextKey ? 1 : -1) + available.length) % available.length;
+            const [next, tab] = available[index2];
+            this.selectPanel(next);
+            tab.button.focus();
+            tab.button.scrollIntoView({ block: "nearest", inline: "nearest" });
+          });
+          root.append(button, close);
+          this.tabStrip.append(root);
+          entry = { root, button, close, icon, caption: caption2, badge };
+          this.#tabs.set(record, entry);
+        }
+        if (this.tabStrip.children[index] !== entry.root) this.tabStrip.insertBefore(entry.root, this.tabStrip.children[index] ?? null);
+        entry.root.hidden = !!record.config.hidden;
+        const caption = record.config.title || record.config.pageName || String(record.index + 1);
+        entry.caption.textContent = caption;
+        entry.button.title = caption;
+        entry.icon.textContent = record.config.icon;
+        entry.badge.textContent = record.config.badge ?? "";
+        entry.badge.hidden = record.config.badge == null || record.config.badge === "";
+        entry.badge.style.backgroundColor = record.config.badge_color;
+        entry.button.setAttribute("aria-label", entry.badge.hidden ? caption : `${caption} ${record.config.badge}`);
+        entry.button.disabled = !!record.config.disabled;
+        entry.button.setAttribute("aria-selected", String(record === selected));
+        entry.button.tabIndex = record === selected ? 0 : -1;
+        entry.close.hidden = !record.config.closable;
+        entry.close.disabled = !!record.config.disabled;
+        entry.close.setAttribute("aria-label", `Close ${caption}`);
+      }
+    }
+  }
+});
+
 // node_modules/@gramlot/gramlot/src/components/popup.js
 var VIEWPORT_MARGIN = 8;
 var ANCHOR_GAP = 3;
-function positionPopup(popup, anchor, { align = "start", matchWidth = false } = {}) {
+function positionPopup(popup, anchor, { align = "start", matchWidth = false, inset = 0 } = {}) {
   const view = anchor.ownerDocument.defaultView;
   const field = anchor.getBoundingClientRect();
   const availableWidth = Math.max(0, view.innerWidth - 2 * VIEWPORT_MARGIN);
   popup.style.setProperty("--gramlot-popup-available-width", `${availableWidth}px`);
-  if (matchWidth) popup.style.width = `${Math.min(field.width, availableWidth)}px`;
+  if (matchWidth) popup.style.width = `${Math.min(Math.max(0, field.width - 2 * inset), availableWidth)}px`;
   popup.style.removeProperty("--gramlot-popup-available-height");
   const natural = popup.getBoundingClientRect();
   const below = Math.max(0, view.innerHeight - VIEWPORT_MARGIN - field.bottom - ANCHOR_GAP);
@@ -236,7 +1073,7 @@ function positionPopup(popup, anchor, { align = "start", matchWidth = false } =
   const upwards = natural.height > below && above > below;
   popup.style.setProperty("--gramlot-popup-available-height", `${upwards ? above : below}px`);
   const size = popup.getBoundingClientRect();
-  const left = align === "end" ? field.right - size.width : field.left;
+  const left = align === "end" ? field.right - size.width - inset : field.left + inset;
   const top = upwards ? field.top - size.height - ANCHOR_GAP : field.bottom + ANCHOR_GAP;
   popup.style.left = `${Math.max(VIEWPORT_MARGIN, Math.min(left, view.innerWidth - size.width - VIEWPORT_MARGIN))}px`;
   popup.style.top = `${Math.max(VIEWPORT_MARGIN, Math.min(top, view.innerHeight - size.height - VIEWPORT_MARGIN))}px`;
@@ -318,28 +1155,6 @@ var FormletLabels = class {
 
 // node_modules/@gramlot/gramlot/src/components/layout.js
 var COPY_FEEDBACK_DURATION = 1600;
-function Container(HTMLElement) {
-  return class extends HTMLElement {
-    constructor() {
-      super();
-      const shadow = this.attachShadow({ mode: "open" });
-      const style = this.ownerDocument.createElement("style");
-      style.textContent = `:host{display:block;min-width:0;font:inherit;color:var(--gramlot-ink,CanvasText)}
-                *,*::before,*::after{box-sizing:border-box}.control-box{min-width:0}slot{display:contents}
-                ::slotted(*){min-width:0;max-width:100%}`;
-      this.controlBox = this.ownerDocument.createElement("div");
-      this.controlBox.className = "control-box";
-      this.control = this.controlBox;
-      this.control.id = "control";
-      this.control.append(this.ownerDocument.createElement("slot"));
-      shadow.append(style, this.controlBox);
-    }
-    projectAttributes(attrs) {
-      return projectParameters(this, attrs);
-    }
-  };
-}
-Container.parameters = {};
 var Formlet = defineComponent({
   name: "formlet",
   tag: "gramlot-formlet",
@@ -533,9 +1348,13 @@ var GroupBox = defineComponent({
     }
   }
 });
-var layout_default = defineCollection({ name: "layout", components: [Formlet, GroupBox] });
+var layout_default = defineCollection({ name: "layout", components: [Formlet, GroupBox, ContentPane, BorderContainer, StackContainer, TabContainer] });
 export {
+  BorderContainer,
+  ContentPane,
   Formlet,
   GroupBox,
+  StackContainer,
+  TabContainer,
   layout_default as default
 };