@vertz/ui 0.2.23 → 0.2.24

package/dist/src/index.js

@@ -24,23 +24,24 @@ import {
   slideOutToTop,
   zoomIn,
   zoomOut
-} from "../shared/chunk-p3fz6qqp.js";
+} from "../shared/chunk-18frwfc4.js";
 import {
+  ErrorBoundary,
   Link,
   Outlet,
   OutletContext,
   RouterView,
   createLink,
+  getCurrentErrorHandler,
   parseSearchParams,
   useSearchParams
-} from "../shared/chunk-016m1fq0.js";
+} from "../shared/chunk-2wag9c7v.js";
 import {
   beginDeferringMounts,
   discardDeferredMounts,
   flushDeferredMounts,
   onMount
-} from "../shared/chunk-2kyhn86t.js";
-import"../shared/chunk-4xkw6h1s.js";
+} from "../shared/chunk-ge2e6y2s.js";
 import {
   createRouter
 } from "../shared/chunk-jtma4sh4.js";
@@ -61,12 +62,11 @@ import {
   getMutationEventBus,
   getQueryEnvelopeStore,
   getRelationSchema,
-  invalidate,
   query,
   queryMatch,
   registerRelationSchema,
   resetRelationSchemas_TEST_ONLY
-} from "../shared/chunk-g6fb5yc2.js";
+} from "../shared/chunk-4gen306a.js";
 import"../shared/chunk-jrtrk5z4.js";
 import {
   ThemeProvider,
@@ -83,15 +83,16 @@ import {
   resolveChildren,
   s,
   variants
-} from "../shared/chunk-xhc7arn9.js";
+} from "../shared/chunk-t3rnfxc0.js";
 import {
   __append,
   __element,
   __enterChildren,
   __exitChildren,
+  __insert,
   __staticText
-} from "../shared/chunk-13tvh4wq.js";
-import"../shared/chunk-prj7nm08.js";
+} from "../shared/chunk-mbnda3pv.js";
+import"../shared/chunk-h1fsr8kv.js";
 import {
   RENDER_NODE_BRAND,
   createDOMAdapter,
@@ -104,6 +105,10 @@ import {
   useParams,
   useRouter
 } from "../shared/chunk-f4d5nphq.js";
+import {
+  invalidate,
+  invalidateTenantQueries
+} from "../shared/chunk-2eh4p2n7.js";
 import {
   isBrowser
 } from "../shared/chunk-da2w7j7w.js";
@@ -122,6 +127,7 @@ import {
   getContextScope,
   getIsHydrating,
   getSSRContext,
+  onCleanup,
   popScope,
   pushScope,
   runCleanups,
@@ -131,65 +137,61 @@ import {
   untrack,
   useContext
 } from "../shared/chunk-656n0x6y.js";
-// src/component/error-boundary-context.ts
-var handlerStack = [];
-function pushErrorHandler(handler) {
-  handlerStack.push(handler);
-}
-function popErrorHandler() {
-  handlerStack.pop();
-}
-function getCurrentErrorHandler() {
-  if (handlerStack.length === 0) {
-    return;
-  }
-  return handlerStack[handlerStack.length - 1];
-}
-
-// src/component/error-boundary.ts
-function toError(value) {
-  if (value instanceof Error) {
-    return value;
-  }
-  return new Error(String(value));
-}
-function ErrorBoundary(props) {
-  function handleAsyncError(error, placeholder) {
-    const fallbackNode = props.fallback(error, retry);
-    function retry() {
-      try {
-        const retryResult = props.children();
-        if (fallbackNode.parentNode) {
-          fallbackNode.parentNode.replaceChild(retryResult, fallbackNode);
-        }
-      } catch (_retryThrown) {}
-    }
-    if (placeholder.parentNode) {
-      placeholder.parentNode.replaceChild(fallbackNode, placeholder);
-    }
-  }
-  try {
-    pushErrorHandler(handleAsyncError);
-    const result = props.children();
-    popErrorHandler();
-    return result;
-  } catch (thrown) {
-    let retry = function() {
-      try {
-        const retryResult = props.children();
-        if (fallbackNode.parentNode) {
-          fallbackNode.parentNode.replaceChild(retryResult, fallbackNode);
-        }
-      } catch (_retryThrown) {}
-    };
-    popErrorHandler();
-    const error = toError(thrown);
-    const fallbackNode = props.fallback(error, retry);
-    return fallbackNode;
-  }
+// src/component/default-error-fallback.ts
+function DefaultErrorFallback({ error, retry }) {
+  const container = document.createElement("div");
+  container.setAttribute("data-testid", "error-fallback");
+  Object.assign(container.style, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "2rem",
+    textAlign: "center"
+  });
+  const heading = document.createElement("h2");
+  heading.textContent = "Something went wrong";
+  Object.assign(heading.style, {
+    fontSize: "1.25rem",
+    fontWeight: "600",
+    marginBottom: "0.5rem",
+    color: "inherit"
+  });
+  const message = document.createElement("p");
+  message.textContent = error.message;
+  Object.assign(message.style, {
+    fontSize: "0.875rem",
+    opacity: "0.7",
+    marginBottom: "1rem",
+    maxWidth: "24rem"
+  });
+  const button = document.createElement("button");
+  button.type = "button";
+  button.setAttribute("data-testid", "error-retry");
+  button.textContent = "Try again";
+  Object.assign(button.style, {
+    padding: "0.5rem 1rem",
+    borderRadius: "0.375rem",
+    border: "1px solid currentColor",
+    background: "transparent",
+    cursor: "pointer",
+    fontSize: "0.875rem"
+  });
+  button.addEventListener("click", retry);
+  container.appendChild(heading);
+  container.appendChild(message);
+  container.appendChild(button);
+  return container;
 }
 // src/component/foreign.ts
-function Foreign({ tag = "div", onReady, id, className, style }) {
+function Foreign({
+  tag = "div",
+  onReady,
+  html,
+  id,
+  className,
+  style
+}) {
   const el = __element(tag);
   if (id)
     el.id = id;
@@ -197,6 +199,9 @@ function Foreign({ tag = "div", onReady, id, className, style }) {
     el.setAttribute("class", className);
   if (style)
     Object.assign(el.style, style);
+  if (html && getSSRContext()) {
+    el.innerHTML = html;
+  }
   if (onReady && !getSSRContext()) {
     onMount(() => onReady(el));
   }
@@ -461,7 +466,7 @@ function ref() {
 function isPromise(value) {
   return value != null && typeof value === "object" && typeof value.then === "function";
 }
-function toError2(value) {
+function toError(value) {
   if (value instanceof Error) {
     return value;
   }
@@ -493,17 +498,26 @@ function Suspense(props) {
         }
       } catch (retryError) {
         if (!isPromise(retryError)) {
-          propagateError(toError2(retryError), placeholder, errorHandler);
+          propagateError(toError(retryError), placeholder, errorHandler);
         }
       }
     }).catch((error) => {
-      propagateError(toError2(error), placeholder, errorHandler);
+      propagateError(toError(error), placeholder, errorHandler);
     });
     return placeholder;
   }
 }
 // src/dialog/dialog-stack.ts
 var DialogStackContext = createContext(undefined, "@vertz/ui::DialogStackContext");
+var DialogHandleContext = createContext(undefined, "@vertz/ui::DialogHandleContext");
+var DialogIdContext = createContext(undefined, "@vertz/ui::DialogIdContext");
+function useDialog() {
+  const handle = useContext(DialogHandleContext);
+  if (!handle) {
+    throw new Error("useDialog() must be called within a dialog opened via DialogStack");
+  }
+  return handle;
+}
 function useDialogStack() {
   const stack = useContext(DialogStackContext);
   if (!stack) {
@@ -511,10 +525,13 @@ function useDialogStack() {
   }
   const capturedScope = getContextScope();
   return {
-    open(component, props) {
-      return stack.openWithScope(component, props, capturedScope);
+    open(component, props, options) {
+      return stack.openWithScope(component, props, capturedScope, options);
     },
     openWithScope: stack.openWithScope,
+    confirm(opts) {
+      return stack.confirm(opts);
+    },
     get size() {
       return stack.size;
     },
@@ -523,25 +540,84 @@ function useDialogStack() {
     }
   };
 }
+function DialogStackProvider({ children: children2 }) {
+  const container = __element("div", { "data-dialog-container": "" });
+  const stack = createDialogStack(container);
+  return DialogStackContext.Provider({
+    value: stack,
+    children: () => {
+      const frag = document.createDocumentFragment();
+      __insert(frag, children2);
+      frag.appendChild(container);
+      return frag;
+    }
+  });
+}
+function ConfirmDialogComponent({
+  title,
+  description,
+  confirm: confirmLabel = "Confirm",
+  cancel: cancelLabel = "Cancel",
+  intent = "primary",
+  dialog
+}) {
+  const frag = document.createDocumentFragment();
+  const titleEl = document.createElement("h2");
+  titleEl.setAttribute("data-part", "title");
+  titleEl.textContent = title;
+  frag.appendChild(titleEl);
+  if (description) {
+    const descEl = document.createElement("p");
+    descEl.setAttribute("data-part", "description");
+    descEl.textContent = description;
+    frag.appendChild(descEl);
+  }
+  const footer = document.createElement("div");
+  footer.setAttribute("data-part", "footer");
+  const cancelBtn = document.createElement("button");
+  cancelBtn.setAttribute("type", "button");
+  cancelBtn.setAttribute("data-part", "confirm-cancel");
+  cancelBtn.textContent = cancelLabel;
+  cancelBtn.addEventListener("click", () => dialog.close(false));
+  const confirmBtn = document.createElement("button");
+  confirmBtn.setAttribute("type", "button");
+  confirmBtn.setAttribute("data-part", "confirm-action");
+  confirmBtn.setAttribute("data-intent", intent);
+  confirmBtn.textContent = confirmLabel;
+  confirmBtn.addEventListener("click", () => dialog.close(true));
+  footer.appendChild(cancelBtn);
+  footer.appendChild(confirmBtn);
+  frag.appendChild(footer);
+  return frag;
+}
 function createDialogStack(container) {
   const entries = [];
   let nextId = 0;
-  function open(component, props, capturedScope) {
+  function open(component, props, capturedScope, options) {
     return new Promise((resolve) => {
       if (entries.length > 0) {
-        entries[entries.length - 1].wrapper.setAttribute("data-state", "background");
+        entries[entries.length - 1].dialogEl.setAttribute("data-state", "background");
       }
-      const wrapper = document.createElement("div");
-      wrapper.setAttribute("data-dialog-wrapper", "");
-      wrapper.setAttribute("data-state", "open");
-      wrapper.setAttribute("data-dialog-depth", "0");
+      const dialogId = `dlg-${nextId}`;
+      const dialogEl = document.createElement("dialog");
+      dialogEl.setAttribute("data-dialog-wrapper", "");
+      dialogEl.setAttribute("data-state", "open");
+      dialogEl.setAttribute("data-dialog-depth", "0");
+      const panel = document.createElement("div");
+      panel.setAttribute("data-part", "panel");
+      panel.setAttribute("role", "dialog");
+      panel.setAttribute("aria-modal", "true");
+      panel.setAttribute("aria-labelledby", `${dialogId}-title`);
+      panel.setAttribute("aria-describedby", `${dialogId}-desc`);
+      dialogEl.appendChild(panel);
       const entry = {
         id: nextId++,
-        wrapper,
+        dialogEl,
+        panel,
         node: null,
         resolve,
         cleanups: [],
-        dismissible: true,
+        dismissible: options?.dismissible !== false,
         settled: false
       };
       const prevScope = setContextScope(capturedScope ?? null);
@@ -551,60 +627,93 @@ function createDialogStack(container) {
           closeEntry(entry, args[0]);
         }
       };
-      entry.node = component({ ...props, dialog: handle });
+      DialogHandleContext.Provider(handle, () => {
+        DialogIdContext.Provider(dialogId, () => {
+          entry.node = component({ ...props, dialog: handle });
+        });
+      });
       entry.cleanups = [...scope];
       popScope();
       setContextScope(prevScope);
-      if (entry.dismissible) {
-        wrapper.addEventListener("keydown", (e) => {
-          if (e.key === "Escape" && entries[entries.length - 1] === entry) {
-            e.preventDefault();
-            e.stopPropagation();
-            dismissEntry(entry);
-          }
-        });
-      }
-      wrapper.appendChild(entry.node);
-      container.appendChild(wrapper);
+      dialogEl.addEventListener("cancel", (e) => {
+        e.preventDefault();
+        if (entry.dismissible && entries[entries.length - 1] === entry) {
+          dismissEntry(entry);
+        }
+      });
+      dialogEl.addEventListener("click", (e) => {
+        if (!entry.dismissible)
+          return;
+        const rect = panel.getBoundingClientRect();
+        const isOutside = e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom;
+        if (isOutside) {
+          dismissEntry(entry);
+        }
+      });
+      panel.appendChild(entry.node);
+      const titleTarget = panel.querySelector('[data-part="title"]');
+      if (titleTarget && !titleTarget.id)
+        titleTarget.id = `${dialogId}-title`;
+      const descTarget = panel.querySelector('[data-part="description"]');
+      if (descTarget && !descTarget.id)
+        descTarget.id = `${dialogId}-desc`;
+      container.appendChild(dialogEl);
       entries.push(entry);
       updateDepthAttributes();
+      dialogEl.showModal();
     });
   }
-  function closeEntry(entry, result) {
+  function removeEntry(entry, resolution) {
     if (entry.settled)
       return;
     const idx = entries.indexOf(entry);
     if (idx === -1)
       return;
     entry.settled = true;
-    entry.wrapper.setAttribute("data-state", "closed");
-    onAnimationsComplete(entry.wrapper, () => {
+    entry.dialogEl.setAttribute("data-state", "closed");
+    entry.dialogEl.setAttribute("inert", "");
+    onAnimationsComplete(entry.dialogEl, () => {
       runCleanups(entry.cleanups);
-      if (entry.wrapper.parentNode === container) {
-        container.removeChild(entry.wrapper);
+      if (entry.dialogEl.open) {
+        entry.dialogEl.close();
+      }
+      if (entry.dialogEl.parentNode === container) {
+        container.removeChild(entry.dialogEl);
       }
       const entryIdx = entries.indexOf(entry);
       if (entryIdx !== -1) {
         entries.splice(entryIdx, 1);
       }
       if (entries.length > 0) {
-        entries[entries.length - 1].wrapper.setAttribute("data-state", "open");
+        entries[entries.length - 1].dialogEl.setAttribute("data-state", "open");
       }
       updateDepthAttributes();
-      entry.resolve({ ok: true, data: result });
+      entry.resolve(resolution);
     });
   }
+  function closeEntry(entry, result) {
+    removeEntry(entry, { ok: true, data: result });
+  }
+  function dismissEntry(entry) {
+    removeEntry(entry, { ok: false });
+  }
   function updateDepthAttributes() {
     for (let i = 0;i < entries.length; i++) {
-      entries[i].wrapper.setAttribute("data-dialog-depth", String(entries.length - 1 - i));
+      entries[i].dialogEl.setAttribute("data-dialog-depth", String(entries.length - 1 - i));
     }
   }
   return {
-    open(component, props) {
-      return open(component, props);
+    open(component, props, options) {
+      return open(component, props, undefined, options);
+    },
+    openWithScope(component, props, scope, options) {
+      return open(component, props, scope, options);
     },
-    openWithScope(component, props, scope) {
-      return open(component, props, scope);
+    async confirm(opts) {
+      const result = await open(ConfirmDialogComponent, opts, undefined, {
+        dismissible: opts.dismissible ?? false
+      });
+      return result.ok ? result.data : false;
     },
     get size() {
       return entries.length;
@@ -615,30 +724,118 @@ function createDialogStack(container) {
       }
     }
   };
-  function dismissEntry(entry) {
-    if (entry.settled)
-      return;
-    const idx = entries.indexOf(entry);
-    if (idx === -1)
-      return;
-    entry.settled = true;
-    entry.wrapper.setAttribute("data-state", "closed");
-    onAnimationsComplete(entry.wrapper, () => {
-      runCleanups(entry.cleanups);
-      if (entry.wrapper.parentNode === container) {
-        container.removeChild(entry.wrapper);
-      }
-      const entryIdx = entries.indexOf(entry);
-      if (entryIdx !== -1) {
-        entries.splice(entryIdx, 1);
-      }
-      if (entries.length > 0) {
-        entries[entries.length - 1].wrapper.setAttribute("data-state", "open");
-      }
-      updateDepthAttributes();
-      entry.resolve({ ok: false });
-    });
+}
+// src/format/relative-time.ts
+function toDate(date) {
+  if (date instanceof Date)
+    return date;
+  if (typeof date === "number")
+    return new Date(date);
+  return new Date(date);
+}
+var rtfCache = new Map;
+function getFormatter(locale, numeric = "auto") {
+  const key = `${locale ?? ""}:${numeric}`;
+  let rtf = rtfCache.get(key);
+  if (!rtf) {
+    rtf = new Intl.RelativeTimeFormat(locale, { numeric, style: "long" });
+    rtfCache.set(key, rtf);
+  }
+  return rtf;
+}
+function formatRelativeTime(date, options) {
+  const now = options?.now ?? new Date;
+  const d = toDate(date);
+  if (Number.isNaN(d.getTime())) {
+    throw new Error(`formatRelativeTime: invalid date input: ${String(date)}`);
+  }
+  const diffMs = now.getTime() - d.getTime();
+  const diffSec = Math.floor(Math.abs(diffMs) / 1000);
+  const locale = options?.locale;
+  const numeric = options?.numeric ?? "auto";
+  const rtf = getFormatter(locale, numeric);
+  const sign = diffMs >= 0 ? -1 : 1;
+  if (diffSec < 10) {
+    return rtf.format(0, "second");
+  }
+  if (diffSec < 60) {
+    return rtf.format(sign * diffSec, "second");
+  }
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) {
+    return rtf.format(sign * diffMin, "minute");
+  }
+  const diffHours = Math.floor(diffMin / 60);
+  if (diffHours < 24) {
+    return rtf.format(sign * diffHours, "hour");
+  }
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffDays < 7) {
+    return rtf.format(sign * diffDays, "day");
+  }
+  if (diffDays < 30) {
+    const diffWeeks = Math.floor(diffDays / 7);
+    return rtf.format(sign * diffWeeks, "week");
+  }
+  if (diffDays < 365) {
+    const diffMonths = Math.floor(diffDays / 30);
+    return rtf.format(sign * diffMonths, "month");
   }
+  const diffYears = Math.floor(diffDays / 365);
+  return rtf.format(sign * diffYears, "year");
+}
+// src/format/relative-time-component.ts
+function getAdaptiveInterval(date) {
+  const d = toDate(date);
+  const elapsedMs = Math.abs(Date.now() - d.getTime());
+  const elapsedSec = elapsedMs / 1000;
+  if (elapsedSec < 60)
+    return 1e4;
+  if (elapsedSec < 3600)
+    return 60000;
+  if (elapsedSec < 86400)
+    return 3600000;
+  return null;
+}
+function RelativeTime({
+  date,
+  locale,
+  numeric,
+  updateInterval,
+  className,
+  title
+}) {
+  const d = toDate(date);
+  const isoString = d.toISOString();
+  const opts = { locale, numeric };
+  const el = document.createElement("time");
+  el.setAttribute("datetime", isoString);
+  el.textContent = formatRelativeTime(date, opts);
+  if (title !== false) {
+    el.title = typeof title === "string" ? title : new Intl.DateTimeFormat(locale, {
+      dateStyle: "long",
+      timeStyle: "medium"
+    }).format(d);
+  }
+  if (className) {
+    el.className = className;
+  }
+  onMount(() => {
+    let timerId;
+    function tick() {
+      el.textContent = formatRelativeTime(date, opts);
+      const interval = updateInterval ?? getAdaptiveInterval(date);
+      if (interval !== null) {
+        timerId = setTimeout(tick, interval);
+      }
+    }
+    const initialInterval = updateInterval ?? getAdaptiveInterval(date);
+    if (initialInterval !== null) {
+      timerId = setTimeout(tick, initialInterval);
+    }
+    return () => clearTimeout(timerId);
+  });
+  return el;
 }
 // src/image/config.ts
 var optimizerBaseUrl = null;
@@ -895,6 +1092,7 @@ export {
   useRouter,
   useParams,
   useDialogStack,
+  useDialog,
   useContext,
   untrack,
   slideOutToTop,
@@ -919,12 +1117,14 @@ export {
   parseSearchParams,
   palettes,
   onMount,
+  onCleanup,
   onAnimationsComplete,
   mount,
   keyframes,
   isRenderNode,
   isQueryDescriptor,
   isBrowser,
+  invalidateTenantQueries,
   invalidate,
   injectCSS,
   hydrateIslands,
@@ -935,6 +1135,7 @@ export {
   getInjectedCSS,
   getEntityStore,
   getAdapter,
+  formatRelativeTime,
   formDataToObject,
   form,
   font,
@@ -969,6 +1170,7 @@ export {
   Suspense,
   RouterView,
   RouterContext,
+  RelativeTime,
   RENDER_NODE_BRAND,
   QueryEnvelopeStore,
   Presence,
@@ -983,7 +1185,11 @@ export {
   ErrorBoundary,
   EntityStore,
   DisposalScopeError,
+  DialogStackProvider,
   DialogStackContext,
+  DialogIdContext,
+  DialogHandleContext,
+  DefaultErrorFallback,
   ANIMATION_EASING,
   ANIMATION_DURATION
 };