@pajh/buldng 0.0.3 → 0.0.5

package/{dist → 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/{dist → src}/layout.ts

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