@pajh/buldng 0.0.4 → 0.0.6

package/src/buldng-web.ts

@@ -1,76 +1,41 @@
 // buldng-web.ts
-// Pure runtime API for buldng. The optional renderer only writes text into a caller-owned element.
-
-let errorPage: string | null = null;
-let listenersInstalled = false;
-let redirectStarted = false;
-
-declare global {
-  interface Window {
-    __buldngErrorOverlay?: boolean;
-  }
-}
-
-const ERROR_STORAGE_PREFIX = "buldng:error:";
-
-export type ErrorPayload = {
-  id: string;
-  type: "error" | "unhandledrejection";
-  message: string;
-  stack: string;
-  time: string;
-  url: string;
-  userAgent: string;
-  platform: string;
-  language: string;
-};
-
-/**
- * Configure the global error handler.
- * @param url A full URL path like "/error/" or "/fatal/".
- */
-export function setErrorPage(url: string) {
-  if (typeof url !== "string" || !url.length) {
-    throw new Error("setErrorPage: URL must be a non-empty string");
+// Runtime-only listener installer for BULDR.
+// This module contains NO production logic and NO module-level state.
+// It is safe to be bundled multiple times.
+
+export { showModal } from "./buldng-modal";
+export type {
+  ModalIcon,
+  ModalResult,
+  ModalSettings,
+  ModalType,
+} from "./buldng-modal";
+
+export function setErrorPage(page: string) {
+  if (typeof page !== "string" || !page.length) {
+    throw new Error("setErrorPage: page must be a non-empty string");
   }
 
-  // Normalize: ensure no accidental double slashes
-  errorPage = url.endsWith("/") ? url.slice(0, -1) : url;
-
-  // Install global listeners once. Calling setErrorPage again only changes the destination.
-  installGlobalErrorHandler();
-}
-
-/**
- * Internal: installs global error + unhandled rejection handlers.
- */
-function installGlobalErrorHandler() {
-  if (!errorPage || listenersInstalled || isErrorPage() || window.__buldngErrorOverlay) return;
-
-  listenersInstalled = true;
-
+  // Capture `page` in closure — NOT stored on window
   window.addEventListener("error", (event) => {
-    handleError({
-      type: "error",
-      reason: event.error ?? event.message,
-      fallbackMessage: event.message,
-    });
+    window.__error_handler?.(event, page);
   });
 
   window.addEventListener("unhandledrejection", (event) => {
-    handleError({
-      type: "unhandledrejection",
-      reason: event.reason,
-      fallbackMessage: "Unhandled promise rejection",
-    });
+    window.__error_handler?.(event, page);
   });
+
+  console.log(`BULDR: Error handler listener installed, redirect ${page}`);
+
 }
 
-/**
- * Read an error payload previously saved by the global handler.
- * Defaults to the errorId query parameter on the current page.
- */
-export function readErrorPayload(id = getErrorId()): ErrorPayload | null {
+// ------------------------------------------------------------
+// ERROR PAGE SUPPORT — moved from layout-err.ts
+// ------------------------------------------------------------
+
+import type { ErrorPayload } from "./layout-err"; // or wherever you export it
+
+export function readErrorPayload(id: string | null): ErrorPayload | null {
   if (!id) return null;
 
   try {
@@ -84,33 +49,25 @@ export function readErrorPayload(id = getErrorId()): ErrorPayload | null {
   }
 }
 
-/**
- * Read and remove an error payload. Useful for one-shot error pages.
- */
-export function consumeErrorPayload(id = getErrorId()): ErrorPayload | null {
+export function consumeErrorPayload(id: string | null): ErrorPayload | null {
   const payload = readErrorPayload(id);
   if (id) {
     try {
       localStorage.removeItem(storageKey(id));
-    } catch {
-      // Storage may be unavailable or blocked; the payload was still safely read if possible.
-    }
+    } catch {}
   }
   return payload;
 }
 
-/**
- * Render a payload as safe text inside a caller-owned element.
- * Returns the payload that was rendered, or null when it was unavailable.
- */
 export function renderErrorPayload(
   elementId: string,
-  payload = readErrorPayload()
+  payload: ErrorPayload | null
 ): ErrorPayload | null {
   const container = document.getElementById(elementId);
   if (!container) return null;
 
   container.replaceChildren();
+
   if (!payload) {
     const empty = document.createElement("p");
     empty.textContent = "Error details are no longer available.";
@@ -129,19 +86,24 @@ export function renderErrorPayload(
   ];
 
   const list = document.createElement("dl");
+
   for (const [label, value] of details) {
     const term = document.createElement("dt");
     term.textContent = label;
+
     const description = document.createElement("dd");
     description.textContent = value;
+
     list.append(term, description);
   }
 
   if (payload.stack) {
     const stackLabel = document.createElement("h3");
     stackLabel.textContent = "Stack";
+
     const stack = document.createElement("pre");
     stack.textContent = payload.stack;
+
     list.append(stackLabel, stack);
   }
 
@@ -149,119 +111,32 @@ export function renderErrorPayload(
   return payload;
 }
 
-/**
- * Return the error record ID from the current URL.
- */
 export function getErrorId(): string | null {
   return new URLSearchParams(location.search).get("errorId");
 }
 
-function handleError(info: {
-  type: ErrorPayload["type"];
-  reason: unknown;
-  fallbackMessage: string;
-}) {
-  if (redirectStarted || !errorPage) return;
-  redirectStarted = true;
-
-  const payload = buildPayload(info);
-  const stored = saveErrorPayload(payload);
-  redirect(payload, stored);
-}
-
-function buildPayload(info: {
-  type: ErrorPayload["type"];
-  reason: unknown;
-  fallbackMessage: string;
-}): ErrorPayload {
-  const id = createId();
-  const error = info.reason instanceof Error ? info.reason : null;
+// ------------------------------------------------------------
+// TYPE GUARDS & UTILITIES — also needed by error page
+// ------------------------------------------------------------
 
-  return {
-    id,
-    type: info.type,
-    message: getErrorMessage(info.reason, info.fallbackMessage),
-    stack: error?.stack ?? getErrorStack(info.reason),
-    time: new Date().toISOString(),
-    url: location.href,
-    userAgent: navigator.userAgent,
-    platform: navigator.platform,
-    language: navigator.language,
-  };
-}
-
-/**
- * Redirect to the configured error page with a storage key, plus a small fallback.
- */
-function redirect(payload: ErrorPayload, stored: boolean) {
-  if (!errorPage) return;
-
-  const destination = new URL(errorPage, location.href);
-  if (stored) {
-    destination.searchParams.set("errorId", payload.id);
-  } else {
-    destination.searchParams.set("type", payload.type);
-    destination.searchParams.set("message", payload.message.slice(0, 500));
-  }
+function isErrorPayload(value: unknown): value is ErrorPayload {
+  if (!value || typeof value !== "object") return false;
 
-  window.location.href = destination.href;
-}
+  const p = value as Partial<ErrorPayload>;
 
-function saveErrorPayload(payload: ErrorPayload): boolean {
-  try {
-    localStorage.setItem(storageKey(payload.id), JSON.stringify(payload));
-    return true;
-  } catch {
-    return false;
-  }
+  return (
+    typeof p.id === "string" &&
+    (p.type === "error" || p.type === "unhandledrejection") &&
+    typeof p.message === "string" &&
+    typeof p.stack === "string" &&
+    typeof p.time === "string" &&
+    typeof p.url === "string" &&
+    typeof p.userAgent === "string" &&
+    typeof p.platform === "string" &&
+    typeof p.language === "string"
+  );
 }
 
 function storageKey(id: string) {
-  return `${ERROR_STORAGE_PREFIX}${id}`;
-}
-
-function createId() {
-  if (typeof crypto.randomUUID === "function") return crypto.randomUUID();
-  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
-}
-
-function isErrorPage() {
-  const destination = new URL(errorPage!, location.href);
-  const destinationPath = destination.pathname.replace(/\/$/, "") || "/";
-  const currentPath = location.pathname.replace(/\/$/, "") || "/";
-  return destination.origin === location.origin && destinationPath === currentPath;
-}
-
-function getErrorMessage(reason: unknown, fallback: string) {
-  if (reason instanceof Error && reason.message) return reason.message;
-  if (typeof reason === "string" && reason) return reason;
-  if (reason !== null && reason !== undefined) {
-    try {
-      const text = JSON.stringify(reason);
-      if (text) return text;
-    } catch {
-      // Fall through to the stable message below.
-    }
-  }
-  return fallback;
-}
-
-function getErrorStack(reason: unknown) {
-  if (!reason || typeof reason !== "object") return "";
-  const stack = (reason as { stack?: unknown }).stack;
-  return typeof stack === "string" ? stack : "";
-}
-
-function isErrorPayload(value: unknown): value is ErrorPayload {
-  if (!value || typeof value !== "object") return false;
-  const payload = value as Partial<ErrorPayload>;
-  return typeof payload.id === "string"
-    && (payload.type === "error" || payload.type === "unhandledrejection")
-    && typeof payload.message === "string"
-    && typeof payload.stack === "string"
-    && typeof payload.time === "string"
-    && typeof payload.url === "string"
-    && typeof payload.userAgent === "string"
-    && typeof payload.platform === "string"
-    && typeof payload.language === "string";
+  return `buldng:error:${id}`;
 }

package/src/buldng.css

@@ -146,3 +146,133 @@ button {
   background: var(--button);
 }
 
+/* --------------------------------------------------
+   MODAL SYSTEM
+-------------------------------------------------- */
+
+#b-modal-root {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  pointer-events: none;
+}
+
+#b-modal-root .buldng-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: var(--modal-backdrop-color, rgba(0, 0, 0, 0.5));
+  pointer-events: auto;
+}
+#b-modal-root .buldng-modal {
+  display: flex;
+  flex-direction: column;
+  width: min(100%, 480px);
+  max-height: min(100%, 720px);
+  overflow: auto;
+  color: var(--text, #222222);
+  background: var(--modal-bg, var(--panel, #ffffff));
+  border: 2px solid var(--modal-accent-color, #0066cc);
+  border-radius: var(--modal-radius, 12px);
+  box-shadow: var(--modal-shadow, 0 4px 20px rgba(0, 0, 0, 0.3));
+}
+
+#b-modal-root .buldng-modal-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: var(--modal-padding, 20px) var(--modal-padding, 20px) 0;
+}
+
+#b-modal-root .buldng-modal-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 32px;
+  width: 32px;
+  height: 32px;
+  color: var(--modal-accent-color, #0066cc);
+  font-weight: 700;
+  border: 2px solid currentColor;
+  border-radius: 50%;
+}
+
+#b-modal-root .buldng-modal-title {
+  margin: 0;
+  color: inherit;
+  font-size: 1.2em;
+}
+
+#b-modal-root .buldng-modal-content {
+  padding: var(--modal-padding, 20px);
+  overflow: auto;
+}
+
+#b-modal-root .buldng-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 0 var(--modal-padding, 20px) var(--modal-padding, 20px);
+}
+
+#b-modal-root .buldng-modal-button {
+  min-width: 88px;
+  min-height: 44px;
+  padding: 8px 16px;
+  color: var(--text, #222222);
+  font: inherit;
+  font-weight: 600;
+  background: var(--button, #f0f0f0);
+  border: 1px solid var(--line, #9c9c9c);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+#b-modal-root .buldng-modal-button-primary {
+  color: #ffffff;
+  background: var(--modal-accent-color, #0066cc);
+  border-color: var(--modal-accent-color, #0066cc);
+}
+
+#b-modal-root .buldng-modal-button:focus-visible {
+  outline: 3px solid var(--highlight1, #4aa3ff);
+  outline-offset: 2px;
+}
+
+#b-modal-root .buldng-modal.info {
+  --modal-accent-color: #0066cc;
+}
+
+#b-modal-root .buldng-modal.confirmation {
+  --modal-accent-color: #444444;
+}
+
+#b-modal-root .buldng-modal.destructive,
+#b-modal-root .buldng-modal.error {
+  --modal-accent-color: #cc0000;
+}
+
+@media (max-width: 520px) {
+  #b-modal-root .buldng-modal-backdrop {
+    align-items: flex-end;
+    padding: 0;
+  }
+
+  #b-modal-root .buldng-modal {
+    width: 100%;
+    max-height: 90%;
+    border-radius: var(--modal-radius, 12px) var(--modal-radius, 12px) 0 0;
+  }
+
+  #b-modal-root .buldng-modal-footer {
+    flex-direction: column-reverse;
+  }
+
+  #b-modal-root .buldng-modal-button {
+    width: 100%;
+  }
+}
+

package/src/dev-errors.js

@@ -0,0 +1,16 @@
+// Development-only override. setErrorPage() owns the event listeners.
+console.log("[dev-errors] overriding window.__error_handler");
+
+window.__error_handler = (event, page) => {
+  const reason =
+    event.type === "error"
+      ? event.error ?? event.message
+      : event.reason;
+
+  const message =
+    reason instanceof Error
+      ? reason.message
+      : String(reason || "Unknown error");
+
+  alert(`BULDR DEV ERROR:\n\n${message}\n\nCheck DevTools for full details.`);
+};

package/src/layout-err.ts

@@ -0,0 +1,171 @@
+/**
+ * ============================================================
+ * BULDR PRODUCTION ERROR SUBSYSTEM  —  layout-err.ts
+ * ============================================================
+ *
+ * This module is bundled ONLY by layout.ts.
+ * It owns ALL production error logic:
+ *   - capturing errors
+ *   - building payloads
+ *   - storing payloads
+ *   - redirecting to the error page
+ *
+ * buldng-web.ts owns:
+ *   - reading payloads
+ *   - consuming payloads
+ *   - rendering payloads
+ *   - runtime utilities
+ *
+ * error-main.ts owns:
+ *   - UI for the error page
+ *
+ * ============================================================
+ */
+
+const ERROR_STORAGE_PREFIX = "buldng:error:";
+
+// ------------------------------------------------------------
+// PUBLIC API
+// ------------------------------------------------------------
+
+/**
+ * Install the production error handler wrapper.
+ * layout.ts calls this once during startup.
+ */
+export function installErrorHandler() {
+  window.__error_handler = (event, page) => {
+    handleError(event, page);
+  };
+  console.log("BULDR: Production error handler installed");
+}
+
+// ------------------------------------------------------------
+// CORE PRODUCTION LOGIC
+// ------------------------------------------------------------
+
+function handleError(
+  event: ErrorEvent | PromiseRejectionEvent,
+  page: string
+) {
+  if (window.__buldngErrorOverlay) return;
+
+  const info =
+    event instanceof ErrorEvent
+      ? {
+          type: "error" as const,
+          reason: event.error ?? event.message,
+          fallbackMessage: event.message,
+        }
+      : {
+          type: "unhandledrejection" as const,
+          reason: event.reason,
+          fallbackMessage: "Unhandled promise rejection",
+        };
+
+  const payload = buildPayload(info);
+  const stored = saveErrorPayload(payload);
+
+  redirect(payload, stored, page);
+}
+
+// ------------------------------------------------------------
+// PAYLOAD BUILDING
+// ------------------------------------------------------------
+
+export type ErrorPayload = {
+  id: string;
+  type: "error" | "unhandledrejection";
+  message: string;
+  stack: string;
+  time: string;
+  url: string;
+  userAgent: string;
+  platform: string;
+  language: string;
+};
+
+function buildPayload(info: {
+  type: ErrorPayload["type"];
+  reason: unknown;
+  fallbackMessage: string;
+}): ErrorPayload {
+  const id = createId();
+  const error = info.reason instanceof Error ? info.reason : null;
+
+  return {
+    id,
+    type: info.type,
+    message: getErrorMessage(info.reason, info.fallbackMessage),
+    stack: error?.stack ?? getErrorStack(info.reason),
+    time: new Date().toISOString(),
+    url: location.href,
+    userAgent: navigator.userAgent,
+    platform: navigator.platform,
+    language: navigator.language,
+  };
+}
+
+// ------------------------------------------------------------
+// REDIRECT
+// ------------------------------------------------------------
+
+function redirect(payload: ErrorPayload, stored: boolean, page: string) {
+  const destination = new URL(page, location.href);
+
+  if (stored) {
+    destination.searchParams.set("errorId", payload.id);
+  } else {
+    destination.searchParams.set("type", payload.type);
+    destination.searchParams.set("message", payload.message.slice(0, 500));
+  }
+
+  window.location.href = destination.href;
+}
+
+// ------------------------------------------------------------
+// STORAGE (production only)
+// ------------------------------------------------------------
+
+function saveErrorPayload(payload: ErrorPayload): boolean {
+  try {
+    localStorage.setItem(storageKey(payload.id), JSON.stringify(payload));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function storageKey(id: string) {
+  return `${ERROR_STORAGE_PREFIX}${id}`;
+}
+
+function createId() {
+  if (typeof crypto.randomUUID === "function") return crypto.randomUUID();
+  return `${Date.now().toString(36)}-${Math.random()
+    .toString(36)
+    .slice(2)}`;
+}
+
+// ------------------------------------------------------------
+// UTILITIES (production only)
+// ------------------------------------------------------------
+
+function getErrorMessage(reason: unknown, fallback: string) {
+  if (reason instanceof Error && reason.message) return reason.message;
+  if (typeof reason === "string" && reason) return reason;
+
+  if (reason !== null && reason !== undefined) {
+    try {
+      const text = JSON.stringify(reason);
+      if (text) return text;
+    } catch {}
+  }
+
+  return fallback;
+}
+
+function getErrorStack(reason: unknown) {
+  if (!reason || typeof reason !== "object") return "";
+  const stack = (reason as { stack?: unknown }).stack;
+  return typeof stack === "string" ? stack : "";
+}

package/src/layout.ts

@@ -1,3 +1,7 @@
+import { installErrorHandler } from "./layout-err";
+
+installErrorHandler();
+
 /* --------------------------------------------------
    GLOBAL VIEWPORT STATE
 -------------------------------------------------- */