@ossido-labs/ossido-ui 0.1.0

package/dist/esm/components/devErrorStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devErrorStore.js","names":[],"sources":["../../../src/components/devErrorStore.ts"],"sourcesContent":["/**\n * Development-only store that aggregates every kind of dev error behind one\n * overlay: React render errors (and SSR/Rust panics) caught by the route error\n * boundary, uncaught `window` errors, unhandled promise rejections, and Vite\n * build/compile errors. {@link DevErrorOverlayHost} subscribes to it via\n * `useSyncExternalStore` and renders a persistent dev indicator + browsable\n * error overlay.\n *\n * The store is a module singleton (not React state) so it exists before the\n * overlay mounts and independently of which subtree threw. It is also published\n * on `window.__OSSIDO_DEV_ERRORS__` so the Vite HMR client — patched by\n * `ErrorOverlayVitePlugin`, which runs outside the module system — can report\n * build errors into it without needing `import.meta.hot`.\n */\n\n/** The distinct sources an aggregated error can come from. */\nexport type DevErrorKind =\n  | 'runtime'\n  | 'uncaught'\n  | 'unhandledrejection'\n  | 'build';\n\n/**\n * A Vite build/compile error (a subset of Vite's `ErrorPayload['err']`). Kept\n * structural rather than importing from `vite` so this module carries no build\n * dependency.\n */\nexport interface DevBuildError {\n  message: string;\n  stack?: string;\n  id?: string;\n  frame?: string;\n  plugin?: string;\n  loc?: { file?: string; line?: number; column?: number };\n}\n\nexport interface DevErrorEntry {\n  id: number;\n  kind: DevErrorKind;\n  /** Present for JS errors (`runtime` / `uncaught` / `unhandledrejection`). */\n  error?: Error;\n  /** Present for `build` errors. */\n  build?: DevBuildError;\n  /** Only in-place-resettable errors (the route boundary) carry a reset. */\n  reset?: () => void;\n  /** How many times this identical error has been reported (dedup counter). */\n  occurrences: number;\n  /** Dedup key — identical errors collapse to a single entry. */\n  signature: string;\n}\n\n/** Which screen corner the dev indicator sits in. */\nexport type DevOverlayCorner =\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right';\n\nexport const DEV_OVERLAY_CORNERS: ReadonlyArray<DevOverlayCorner> = [\n  'top-left',\n  'top-right',\n  'bottom-left',\n  'bottom-right',\n];\n\nexport interface DevErrorState {\n  entries: ReadonlyArray<DevErrorEntry>;\n  /** Index of the entry currently shown in the pager. */\n  activeIndex: number;\n  /** The full error overlay is open (only meaningful when there are errors). */\n  overlayOpen: boolean;\n  /** The indicator's menu popover is open. */\n  menuOpen: boolean;\n  /** The user hid the idle indicator for this session (errors still force it). */\n  badgeHidden: boolean;\n  /** Which corner the indicator sits in (persisted across reloads). */\n  position: DevOverlayCorner;\n}\n\nconst DEFAULT_CORNER: DevOverlayCorner = 'bottom-left';\nconst CORNER_STORAGE_KEY = 'ossido:dev-overlay-corner';\n\n/** The corner is a persisted preference; hiding the badge is per-session. */\nfunction loadCorner(): DevOverlayCorner {\n  try {\n    const stored = globalThis.localStorage?.getItem(CORNER_STORAGE_KEY);\n    if (\n      stored &&\n      (DEV_OVERLAY_CORNERS as ReadonlyArray<string>).includes(stored)\n    )\n      return stored as DevOverlayCorner;\n  } catch {\n    // localStorage can be unavailable (SSR, privacy mode) — use the default.\n  }\n  return DEFAULT_CORNER;\n}\n\nfunction saveCorner(corner: DevOverlayCorner): void {\n  try {\n    globalThis.localStorage?.setItem(CORNER_STORAGE_KEY, corner);\n  } catch {\n    // Best-effort — a failed write just means the corner isn't remembered.\n  }\n}\n\nconst EMPTY_STATE: DevErrorState = {\n  entries: [],\n  activeIndex: 0,\n  overlayOpen: false,\n  menuOpen: false,\n  badgeHidden: false,\n  position: DEFAULT_CORNER,\n};\n\nconst BRIDGE_KEY = '__OSSIDO_DEV_ERRORS__';\nconst BUFFER_KEY = '__OSSIDO_DEV_ERRORS_BUFFER__';\n\n// Deliberately kind-agnostic: React rethrows a caught render error to\n// `window.onerror` in dev, so the same error arrives as both `runtime` (from the\n// boundary) and `uncaught`. Keying on the error identity collapses them into one\n// entry (upgraded to `runtime` so it keeps a working \"Try again\").\nfunction jsSignature(error: Error): string {\n  return `${error.name}:${error.message}:${(error.stack ?? '').slice(0, 200)}`;\n}\n\n// Build errors replace one another (Vite reports the latest), so they share a\n// single signature — a new build error overwrites the previous one.\nconst BUILD_SIGNATURE = 'build';\n\nclass DevErrorStore {\n  private entries: Array<DevErrorEntry> = [];\n  private activeIndex = 0;\n  private overlayOpen = false;\n  private menuOpen = false;\n  private badgeHidden = false;\n  private position: DevOverlayCorner = loadCorner();\n  private nextId = 1;\n  private listeners = new Set<() => void>();\n  // Cached immutable snapshot for `useSyncExternalStore` referential stability.\n  private snapshot: DevErrorState = EMPTY_STATE;\n\n  constructor() {\n    // Build the initial snapshot from the loaded fields (notably the persisted\n    // corner) so the first render already reflects it.\n    this.commit();\n  }\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return (): void => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  getSnapshot = (): DevErrorState => this.snapshot;\n\n  getServerSnapshot = (): DevErrorState => EMPTY_STATE;\n\n  private commit(): void {\n    this.activeIndex = Math.min(\n      Math.max(this.activeIndex, 0),\n      Math.max(this.entries.length - 1, 0),\n    );\n    this.snapshot = {\n      entries: this.entries.slice(),\n      activeIndex: this.activeIndex,\n      // The overlay is only meaningful when there is something to show.\n      overlayOpen: this.overlayOpen && this.entries.length > 0,\n      menuOpen: this.menuOpen,\n      badgeHidden: this.badgeHidden,\n      position: this.position,\n    };\n    for (const listener of this.listeners) listener();\n  }\n\n  /** Add (or refresh) a JS error. Returns its id so the reporter can remove it. */\n  addJsError = (\n    kind: Exclude<DevErrorKind, 'build'>,\n    error: Error,\n    reset?: () => void,\n  ): number => {\n    const signature = jsSignature(error);\n    const existing = this.entries.find((e) => e.signature === signature);\n    if (existing) {\n      // A `runtime` report (from the boundary) carries a reset and is the\n      // richer representation — let it win over a bare `uncaught` duplicate.\n      if (kind === 'runtime') {\n        existing.kind = 'runtime';\n        existing.reset = reset ?? existing.reset;\n      }\n      // Identical errors dedupe (so a re-render loop can't flood the pager), but\n      // a recurrence still counts and re-opens the overlay.\n      existing.occurrences += 1;\n      this.activeIndex = this.entries.indexOf(existing);\n      this.overlayOpen = true;\n      this.commit();\n      return existing.id;\n    }\n    const entry: DevErrorEntry = {\n      id: this.nextId++,\n      kind,\n      error,\n      reset,\n      occurrences: 1,\n      signature,\n    };\n    this.entries.push(entry);\n    this.activeIndex = this.entries.length - 1;\n    // A genuinely new error opens the overlay.\n    this.overlayOpen = true;\n    this.commit();\n    return entry.id;\n  };\n\n  /** Report a Vite build error — replaces any previous one. */\n  addBuildError = (build: DevBuildError): number => {\n    this.entries = this.entries.filter((e) => e.kind !== 'build');\n    const entry: DevErrorEntry = {\n      id: this.nextId++,\n      kind: 'build',\n      build,\n      occurrences: 1,\n      signature: BUILD_SIGNATURE,\n    };\n    this.entries.push(entry);\n    this.activeIndex = this.entries.length - 1;\n    this.overlayOpen = true;\n    this.commit();\n    return entry.id;\n  };\n\n  /** Clear the current build error (called when Vite reports a successful update). */\n  clearBuildErrors = (): void => {\n    if (!this.entries.some((e) => e.kind === 'build')) return;\n    this.entries = this.entries.filter((e) => e.kind !== 'build');\n    this.commit();\n  };\n\n  removeById = (id: number): void => {\n    const next = this.entries.filter((e) => e.id !== id);\n    if (next.length === this.entries.length) return;\n    this.entries = next;\n    this.commit();\n  };\n\n  setActiveIndex = (index: number): void => {\n    this.activeIndex = index;\n    this.commit();\n  };\n\n  next = (): void => {\n    if (this.entries.length === 0) return;\n    this.activeIndex = (this.activeIndex + 1) % this.entries.length;\n    this.commit();\n  };\n\n  prev = (): void => {\n    if (this.entries.length === 0) return;\n    this.activeIndex =\n      (this.activeIndex - 1 + this.entries.length) % this.entries.length;\n    this.commit();\n  };\n\n  /** Open the full error overlay (from the indicator menu's \"View errors\"). */\n  openOverlay = (): void => {\n    this.overlayOpen = true;\n    this.menuOpen = false;\n    this.commit();\n  };\n\n  /** Close the overlay back to the indicator (X / Esc / click-away). */\n  closeOverlay = (): void => {\n    this.overlayOpen = false;\n    this.commit();\n  };\n\n  toggleMenu = (): void => {\n    this.menuOpen = !this.menuOpen;\n    this.commit();\n  };\n\n  closeMenu = (): void => {\n    if (!this.menuOpen) return;\n    this.menuOpen = false;\n    this.commit();\n  };\n\n  /** Hide the idle indicator for this session (a new error still forces it back). */\n  hideBadge = (): void => {\n    this.badgeHidden = true;\n    this.menuOpen = false;\n    this.commit();\n  };\n\n  setPosition = (corner: DevOverlayCorner): void => {\n    this.position = corner;\n    saveCorner(corner);\n    this.commit();\n  };\n\n  /**\n   * Publish the store on `window` and drain any errors buffered by the Vite\n   * client before this module loaded. Safe to call repeatedly.\n   */\n  installBridge(): void {\n    if (typeof window === 'undefined') return;\n    const globalWindow = window as unknown as Record<string, unknown>;\n    globalWindow[BRIDGE_KEY] = this;\n    const buffered = globalWindow[BUFFER_KEY] as\n      | Array<DevBuildError>\n      | undefined;\n    if (buffered?.length) {\n      for (const build of buffered) this.addBuildError(build);\n      globalWindow[BUFFER_KEY] = [];\n    }\n  }\n}\n\nexport const devErrorStore = new DevErrorStore();\n\n// Publish immediately on import (client only) so build errors reported by the\n// patched Vite client always have a target.\ndevErrorStore.installBridge();\n"],"mappings":"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"}

package/dist/esm/components/devErrorStyles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Styles for the dev error overlay. The overlay presents as a floating window
+ * over a dimmed backdrop (like Vite/Next) rather than an opaque full-screen
+ * page, using the shared ossido-ui design tokens (see base.css).
+ */
+export declare const DEV_ERROR_STYLES = "\n.ossido-err-backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 2147483647;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  overflow: auto;\n  padding: var(--ossido-space-8);\n  background: rgba(0, 0, 0, 0.62);\n  font-family: var(--ossido-font-sans);\n  font-size: var(--ossido-font-size);\n  line-height: var(--ossido-line-height);\n  color: var(--ossido-color-text);\n}\n.ossido-err-window {\n  position: relative;\n  width: 100%;\n  max-width: 960px;\n  margin: auto;\n  background: var(--ossido-color-bg);\n  color: var(--ossido-color-text);\n  border: 1px solid var(--ossido-color-border);\n  border-top: 4px solid var(--ossido-color-accent);\n  border-radius: var(--ossido-radius);\n  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);\n  overflow: hidden;\n}\n/* Apply the sans token to every overlay element (0-1-0 beats an app-level\n * \"* { font-family }\" reset at 0-0-0). */\n.ossido-err-window * { font-family: var(--ossido-font-sans); }\n\n/* Pager header: prev/next through the collected errors, plus a dismiss. */\n.ossido-err-pager {\n  display: flex;\n  align-items: center;\n  gap: var(--ossido-space-3);\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--ossido-color-border);\n  background: var(--ossido-color-surface);\n}\n.ossido-err-pager-count {\n  font-variant-numeric: tabular-nums;\n  font-size: var(--ossido-font-size-sm);\n  color: var(--ossido-color-text-muted);\n}\n.ossido-err-pager-kind {\n  font-size: var(--ossido-font-size-xs);\n  text-transform: uppercase;\n  letter-spacing: var(--ossido-letter-spacing-wide);\n  color: var(--ossido-color-text-subtle);\n}\n.ossido-err-pager-occurrences {\n  flex: none;\n  padding: 1px 7px;\n  border-radius: var(--ossido-radius-pill);\n  background: var(--ossido-color-accent);\n  color: var(--ossido-color-on-accent);\n  font-size: var(--ossido-font-size-xs);\n  font-weight: var(--ossido-font-weight-bold);\n  font-variant-numeric: tabular-nums;\n}\n.ossido-err-pager-spacer { flex: 1 1 auto; }\n.ossido-err-nav {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: 1px solid var(--ossido-color-border-strong);\n  border-radius: var(--ossido-radius-sm);\n  background: var(--ossido-color-surface-raised);\n  color: var(--ossido-color-text);\n  font: inherit;\n  line-height: 1;\n  cursor: pointer;\n}\n.ossido-err-nav:hover:not(:disabled) { background: var(--ossido-color-surface-hover); }\n.ossido-err-nav:disabled { opacity: 0.4; cursor: default; }\n.ossido-err-nav svg { width: 15px; height: 15px; display: block; }\n.ossido-err-dismiss {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: 1px solid transparent;\n  border-radius: var(--ossido-radius-sm);\n  background: transparent;\n  color: var(--ossido-color-text-muted);\n  font: inherit;\n  font-size: 18px;\n  line-height: 1;\n  cursor: pointer;\n}\n.ossido-err-dismiss:hover { background: var(--ossido-color-surface-hover); color: var(--ossido-color-text); }\n\n.ossido-err-body { padding: var(--ossido-space-8); }\n\n.ossido-err-badge {\n  display: inline-block;\n  padding: 2px 10px;\n  border-radius: var(--ossido-radius-pill);\n  background: var(--ossido-color-accent);\n  color: var(--ossido-color-on-accent);\n  font-size: var(--ossido-font-size-xs);\n  font-weight: var(--ossido-font-weight-bold);\n  letter-spacing: var(--ossido-letter-spacing-wide);\n  text-transform: uppercase;\n}\n.ossido-err-name {\n  margin: var(--ossido-space-3) 0 var(--ossido-space-4);\n  font-size: var(--ossido-font-size-xl);\n  font-weight: var(--ossido-font-weight-bold);\n  color: var(--ossido-color-accent-text);\n  word-break: break-word;\n}\n.ossido-err-message-card {\n  border: 1px solid var(--ossido-color-border);\n  border-radius: var(--ossido-radius);\n  background: var(--ossido-color-surface);\n  padding: 14px;\n  margin-bottom: var(--ossido-space-6);\n  gap: var(--ossido-space-2);\n  display: flex;\n}\n.ossido-err-message-card svg {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--ossido-color-accent-text);\n  flex: none;\n}\n.ossido-err-message {\n  margin: 0;\n  color: var(--ossido-color-accent-text);\n  white-space: pre-wrap;\n  word-break: break-word;\n  line-height: 1.5rem;\n  font-size: 1rem;\n}\n.ossido-err-source,\n.ossido-err-source *,\n.ossido-err-stack,\n.ossido-err-stack *,\n.ossido-err-frame-code,\n.ossido-err-rawstack {\n  font-family: var(--ossido-font-mono);\n}\n.ossido-err-source {\n  border: 1px solid var(--ossido-color-border);\n  border-radius: var(--ossido-radius);\n  overflow: hidden;\n  margin-bottom: var(--ossido-space-6);\n}\n.ossido-err-source-file {\n  padding: 8px 14px;\n  background: var(--ossido-color-surface);\n  border-bottom: 1px solid var(--ossido-color-border);\n  color: var(--ossido-color-text-muted);\n  font-size: var(--ossido-font-size-sm);\n  word-break: break-all;\n}\n.ossido-err-code { margin: 0; overflow-x: auto; }\n.ossido-err-skel-bar {\n  display: inline-block;\n  height: 0.7em;\n  vertical-align: middle;\n  border-radius: 3px;\n  background: var(--ossido-color-border-strong);\n  animation: ossido-err-skel-pulse 1.3s ease-in-out infinite;\n}\n@keyframes ossido-err-skel-pulse {\n  0%, 100% { opacity: 0.45; }\n  50% { opacity: 0.9; }\n}\n.ossido-err-code-line { display: flex; white-space: pre; }\n.ossido-err-code-line--error { background: var(--ossido-color-danger-surface); }\n.ossido-err-gutter {\n  width: 3.5rem;\n  flex: none;\n  padding: 0 12px;\n  text-align: right;\n  color: var(--ossido-color-text-faint);\n  user-select: none;\n}\n.ossido-err-code-line--error .ossido-err-gutter { color: var(--ossido-color-accent-text); }\n.ossido-err-code-text { padding-right: 14px; color: var(--ossido-color-text); }\n.ossido-err-frame-code {\n  margin: 0 0 var(--ossido-space-6);\n  padding: 12px 14px;\n  border: 1px solid var(--ossido-color-border);\n  border-radius: var(--ossido-radius);\n  background: var(--ossido-color-surface);\n  overflow-x: auto;\n  color: var(--ossido-color-text);\n  font-size: var(--ossido-font-size-sm);\n  white-space: pre;\n}\n.ossido-err-rawstack {\n  margin: 0;\n  padding: 12px 14px;\n  border: 1px solid var(--ossido-color-border);\n  border-radius: var(--ossido-radius);\n  overflow-x: auto;\n  color: var(--ossido-color-text-muted);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.ossido-err-stack { border: 1px solid var(--ossido-color-border); border-radius: var(--ossido-radius); overflow: hidden; }\n.ossido-err-frame { padding: 8px 14px; border-top: 1px solid var(--ossido-color-border); }\n.ossido-err-frame:first-child { border-top: none; }\n.ossido-err-frame--app { background: var(--ossido-color-surface); }\n.ossido-err-frame--vendor { opacity: 0.55; }\n.ossido-err-fn { color: var(--ossido-color-text); }\n.ossido-err-loc { color: var(--ossido-color-text-subtle); font-size: var(--ossido-font-size-sm); word-break: break-all; }\n.ossido-err-actions { margin-top: var(--ossido-space-6); display: flex; gap: var(--ossido-space-3); }\n.ossido-err-btn {\n  padding: 6px 16px;\n  border: 1px solid var(--ossido-color-border-strong);\n  border-radius: var(--ossido-radius-sm);\n  background: var(--ossido-color-surface-raised);\n  color: var(--ossido-color-text);\n  font: inherit;\n  cursor: pointer;\n}\n.ossido-err-btn:hover { background: var(--ossido-color-surface-hover); }\n.ossido-err-hint { margin-top: var(--ossido-space-4); color: var(--ossido-color-text-faint); font-size: var(--ossido-font-size-xs); }\n.ossido-err-frame-toggle {\n  display: block;\n  width: 100%;\n  padding: 8px 14px;\n  text-align: left;\n  border: none;\n  border-top: 1px solid var(--ossido-color-border);\n  background: var(--ossido-color-surface-raised);\n  color: var(--ossido-color-text-subtle);\n  font: inherit;\n  font-size: var(--ossido-font-size-sm);\n  cursor: pointer;\n}\n.ossido-err-frame-toggle:hover { background: var(--ossido-color-surface-hover); }\n.ossido-err-frame-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n.ossido-err-frame-badge {\n  flex: none;\n  padding: 0 10px;\n  border-radius: var(--ossido-radius-pill);\n  background: var(--ossido-color-success-surface);\n  border: 1px solid var(--ossido-color-success);\n  color: var(--ossido-color-success-text);\n  font-family: var(--ossido-font-sans);\n  font-size: var(--ossido-font-size-xs);\n  font-weight: var(--ossido-font-weight-bold);\n  letter-spacing: var(--ossido-letter-spacing-wide);\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n/* The persistent dev indicator: a fixed container in a chosen corner holding a\n * circular lightning badge (Next-style) with an error-count bubble, plus its\n * pop-up menu. */\n.ossido-err-indicator {\n  position: fixed;\n  z-index: 2147483647;\n}\n.ossido-err-indicator--top-left { top: var(--ossido-space-6); left: var(--ossido-space-6); }\n.ossido-err-indicator--top-right { top: var(--ossido-space-6); right: var(--ossido-space-6); }\n.ossido-err-indicator--bottom-left { bottom: var(--ossido-space-6); left: var(--ossido-space-6); }\n.ossido-err-indicator--bottom-right { bottom: var(--ossido-space-6); right: var(--ossido-space-6); }\n\n.ossido-err-fab {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  padding: 0;\n  border: 1px solid var(--ossido-color-border-strong);\n  border-radius: 50%;\n  background: var(--ossido-color-bg);\n  color: var(--ossido-color-text);\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);\n  cursor: pointer;\n  transition: transform 0.12s ease;\n}\n.ossido-err-fab:hover { transform: scale(1.06); }\n.ossido-err-fab svg { width: 22px; height: 22px; display: block; }\n.ossido-err-fab-count {\n  position: absolute;\n  top: -5px;\n  right: -5px;\n  box-sizing: border-box;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 5px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 10px;\n  border: 2px solid var(--ossido-color-bg);\n  background: var(--ossido-color-accent);\n  color: var(--ossido-color-on-accent);\n  font-family: var(--ossido-font-sans);\n  font-size: 11px;\n  font-weight: var(--ossido-font-weight-bold);\n  font-variant-numeric: tabular-nums;\n  line-height: 1;\n}\n\n/* Click-away catcher behind the open menu. */\n.ossido-err-menu-scrim {\n  position: fixed;\n  inset: 0;\n  z-index: 2147483646;\n}\n\n/* The indicator's pop-up menu, anchored to the badge and opening toward the\n * screen centre based on the chosen corner. */\n.ossido-err-menu {\n  position: absolute;\n  min-width: 232px;\n  padding: 6px;\n  background: var(--ossido-color-surface);\n  border: 1px solid var(--ossido-color-border);\n  border-radius: var(--ossido-radius);\n  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);\n  font-family: var(--ossido-font-sans);\n  color: var(--ossido-color-text);\n}\n.ossido-err-menu--top-left { top: calc(100% + 10px); left: 0; }\n.ossido-err-menu--top-right { top: calc(100% + 10px); right: 0; }\n.ossido-err-menu--bottom-left { bottom: calc(100% + 10px); left: 0; }\n.ossido-err-menu--bottom-right { bottom: calc(100% + 10px); right: 0; }\n\n.ossido-err-menu-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--ossido-space-3);\n  width: 100%;\n  padding: 8px 10px;\n  border: none;\n  border-radius: var(--ossido-radius-sm);\n  background: transparent;\n  color: var(--ossido-color-text);\n  font: inherit;\n  font-size: var(--ossido-font-size-sm);\n  text-align: left;\n  cursor: pointer;\n}\n.ossido-err-menu-item:hover:not(:disabled) { background: var(--ossido-color-surface-hover); }\n.ossido-err-menu-item:disabled { color: var(--ossido-color-text-faint); cursor: default; }\n.ossido-err-menu-count {\n  flex: none;\n  min-width: 20px;\n  padding: 0 7px;\n  border-radius: var(--ossido-radius-pill);\n  background: var(--ossido-color-accent);\n  color: var(--ossido-color-on-accent);\n  font-size: var(--ossido-font-size-xs);\n  font-weight: var(--ossido-font-weight-bold);\n  font-variant-numeric: tabular-nums;\n  text-align: center;\n}\n.ossido-err-menu-muted { color: var(--ossido-color-text-faint); font-size: var(--ossido-font-size-xs); }\n.ossido-err-menu-sep {\n  height: 1px;\n  margin: 6px 4px;\n  background: var(--ossido-color-border);\n}\n.ossido-err-menu-section { padding: 4px 10px 8px; }\n.ossido-err-menu-label {\n  display: block;\n  margin-bottom: 8px;\n  color: var(--ossido-color-text-subtle);\n  font-size: var(--ossido-font-size-xs);\n  text-transform: uppercase;\n  letter-spacing: var(--ossido-letter-spacing-wide);\n}\n.ossido-err-menu-corners {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 6px;\n}\n.ossido-err-corner {\n  position: relative;\n  height: 30px;\n  border: 1px solid var(--ossido-color-border-strong);\n  border-radius: var(--ossido-radius-sm);\n  background: var(--ossido-color-surface-raised);\n  cursor: pointer;\n}\n.ossido-err-corner:hover { background: var(--ossido-color-surface-hover); }\n.ossido-err-corner--active {\n  border-color: var(--ossido-color-accent);\n  background: var(--ossido-color-surface-hover);\n}\n.ossido-err-corner-dot {\n  position: absolute;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--ossido-color-text-subtle);\n}\n.ossido-err-corner--active .ossido-err-corner-dot { background: var(--ossido-color-accent); }\n.ossido-err-corner-dot--top-left { top: 5px; left: 5px; }\n.ossido-err-corner-dot--top-right { top: 5px; right: 5px; }\n.ossido-err-corner-dot--bottom-left { bottom: 5px; left: 5px; }\n.ossido-err-corner-dot--bottom-right { bottom: 5px; right: 5px; }\n";

package/dist/esm/components/devErrorStyles.js

@@ -0,0 +1,426 @@
+//#region src/components/devErrorStyles.ts
+/**
+* Styles for the dev error overlay. The overlay presents as a floating window
+* over a dimmed backdrop (like Vite/Next) rather than an opaque full-screen
+* page, using the shared ossido-ui design tokens (see base.css).
+*/
+const DEV_ERROR_STYLES = `
+.ossido-err-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483647;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  overflow: auto;
+  padding: var(--ossido-space-8);
+  background: rgba(0, 0, 0, 0.62);
+  font-family: var(--ossido-font-sans);
+  font-size: var(--ossido-font-size);
+  line-height: var(--ossido-line-height);
+  color: var(--ossido-color-text);
+}
+.ossido-err-window {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: auto;
+  background: var(--ossido-color-bg);
+  color: var(--ossido-color-text);
+  border: 1px solid var(--ossido-color-border);
+  border-top: 4px solid var(--ossido-color-accent);
+  border-radius: var(--ossido-radius);
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
+  overflow: hidden;
+}
+/* Apply the sans token to every overlay element (0-1-0 beats an app-level
+ * "* { font-family }" reset at 0-0-0). */
+.ossido-err-window * { font-family: var(--ossido-font-sans); }
+
+/* Pager header: prev/next through the collected errors, plus a dismiss. */
+.ossido-err-pager {
+  display: flex;
+  align-items: center;
+  gap: var(--ossido-space-3);
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--ossido-color-border);
+  background: var(--ossido-color-surface);
+}
+.ossido-err-pager-count {
+  font-variant-numeric: tabular-nums;
+  font-size: var(--ossido-font-size-sm);
+  color: var(--ossido-color-text-muted);
+}
+.ossido-err-pager-kind {
+  font-size: var(--ossido-font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--ossido-letter-spacing-wide);
+  color: var(--ossido-color-text-subtle);
+}
+.ossido-err-pager-occurrences {
+  flex: none;
+  padding: 1px 7px;
+  border-radius: var(--ossido-radius-pill);
+  background: var(--ossido-color-accent);
+  color: var(--ossido-color-on-accent);
+  font-size: var(--ossido-font-size-xs);
+  font-weight: var(--ossido-font-weight-bold);
+  font-variant-numeric: tabular-nums;
+}
+.ossido-err-pager-spacer { flex: 1 1 auto; }
+.ossido-err-nav {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--ossido-color-border-strong);
+  border-radius: var(--ossido-radius-sm);
+  background: var(--ossido-color-surface-raised);
+  color: var(--ossido-color-text);
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+}
+.ossido-err-nav:hover:not(:disabled) { background: var(--ossido-color-surface-hover); }
+.ossido-err-nav:disabled { opacity: 0.4; cursor: default; }
+.ossido-err-nav svg { width: 15px; height: 15px; display: block; }
+.ossido-err-dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid transparent;
+  border-radius: var(--ossido-radius-sm);
+  background: transparent;
+  color: var(--ossido-color-text-muted);
+  font: inherit;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+.ossido-err-dismiss:hover { background: var(--ossido-color-surface-hover); color: var(--ossido-color-text); }
+
+.ossido-err-body { padding: var(--ossido-space-8); }
+
+.ossido-err-badge {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: var(--ossido-radius-pill);
+  background: var(--ossido-color-accent);
+  color: var(--ossido-color-on-accent);
+  font-size: var(--ossido-font-size-xs);
+  font-weight: var(--ossido-font-weight-bold);
+  letter-spacing: var(--ossido-letter-spacing-wide);
+  text-transform: uppercase;
+}
+.ossido-err-name {
+  margin: var(--ossido-space-3) 0 var(--ossido-space-4);
+  font-size: var(--ossido-font-size-xl);
+  font-weight: var(--ossido-font-weight-bold);
+  color: var(--ossido-color-accent-text);
+  word-break: break-word;
+}
+.ossido-err-message-card {
+  border: 1px solid var(--ossido-color-border);
+  border-radius: var(--ossido-radius);
+  background: var(--ossido-color-surface);
+  padding: 14px;
+  margin-bottom: var(--ossido-space-6);
+  gap: var(--ossido-space-2);
+  display: flex;
+}
+.ossido-err-message-card svg {
+  width: 1.5rem;
+  height: 1.5rem;
+  fill: var(--ossido-color-accent-text);
+  flex: none;
+}
+.ossido-err-message {
+  margin: 0;
+  color: var(--ossido-color-accent-text);
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.5rem;
+  font-size: 1rem;
+}
+.ossido-err-source,
+.ossido-err-source *,
+.ossido-err-stack,
+.ossido-err-stack *,
+.ossido-err-frame-code,
+.ossido-err-rawstack {
+  font-family: var(--ossido-font-mono);
+}
+.ossido-err-source {
+  border: 1px solid var(--ossido-color-border);
+  border-radius: var(--ossido-radius);
+  overflow: hidden;
+  margin-bottom: var(--ossido-space-6);
+}
+.ossido-err-source-file {
+  padding: 8px 14px;
+  background: var(--ossido-color-surface);
+  border-bottom: 1px solid var(--ossido-color-border);
+  color: var(--ossido-color-text-muted);
+  font-size: var(--ossido-font-size-sm);
+  word-break: break-all;
+}
+.ossido-err-code { margin: 0; overflow-x: auto; }
+.ossido-err-skel-bar {
+  display: inline-block;
+  height: 0.7em;
+  vertical-align: middle;
+  border-radius: 3px;
+  background: var(--ossido-color-border-strong);
+  animation: ossido-err-skel-pulse 1.3s ease-in-out infinite;
+}
+@keyframes ossido-err-skel-pulse {
+  0%, 100% { opacity: 0.45; }
+  50% { opacity: 0.9; }
+}
+.ossido-err-code-line { display: flex; white-space: pre; }
+.ossido-err-code-line--error { background: var(--ossido-color-danger-surface); }
+.ossido-err-gutter {
+  width: 3.5rem;
+  flex: none;
+  padding: 0 12px;
+  text-align: right;
+  color: var(--ossido-color-text-faint);
+  user-select: none;
+}
+.ossido-err-code-line--error .ossido-err-gutter { color: var(--ossido-color-accent-text); }
+.ossido-err-code-text { padding-right: 14px; color: var(--ossido-color-text); }
+.ossido-err-frame-code {
+  margin: 0 0 var(--ossido-space-6);
+  padding: 12px 14px;
+  border: 1px solid var(--ossido-color-border);
+  border-radius: var(--ossido-radius);
+  background: var(--ossido-color-surface);
+  overflow-x: auto;
+  color: var(--ossido-color-text);
+  font-size: var(--ossido-font-size-sm);
+  white-space: pre;
+}
+.ossido-err-rawstack {
+  margin: 0;
+  padding: 12px 14px;
+  border: 1px solid var(--ossido-color-border);
+  border-radius: var(--ossido-radius);
+  overflow-x: auto;
+  color: var(--ossido-color-text-muted);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.ossido-err-stack { border: 1px solid var(--ossido-color-border); border-radius: var(--ossido-radius); overflow: hidden; }
+.ossido-err-frame { padding: 8px 14px; border-top: 1px solid var(--ossido-color-border); }
+.ossido-err-frame:first-child { border-top: none; }
+.ossido-err-frame--app { background: var(--ossido-color-surface); }
+.ossido-err-frame--vendor { opacity: 0.55; }
+.ossido-err-fn { color: var(--ossido-color-text); }
+.ossido-err-loc { color: var(--ossido-color-text-subtle); font-size: var(--ossido-font-size-sm); word-break: break-all; }
+.ossido-err-actions { margin-top: var(--ossido-space-6); display: flex; gap: var(--ossido-space-3); }
+.ossido-err-btn {
+  padding: 6px 16px;
+  border: 1px solid var(--ossido-color-border-strong);
+  border-radius: var(--ossido-radius-sm);
+  background: var(--ossido-color-surface-raised);
+  color: var(--ossido-color-text);
+  font: inherit;
+  cursor: pointer;
+}
+.ossido-err-btn:hover { background: var(--ossido-color-surface-hover); }
+.ossido-err-hint { margin-top: var(--ossido-space-4); color: var(--ossido-color-text-faint); font-size: var(--ossido-font-size-xs); }
+.ossido-err-frame-toggle {
+  display: block;
+  width: 100%;
+  padding: 8px 14px;
+  text-align: left;
+  border: none;
+  border-top: 1px solid var(--ossido-color-border);
+  background: var(--ossido-color-surface-raised);
+  color: var(--ossido-color-text-subtle);
+  font: inherit;
+  font-size: var(--ossido-font-size-sm);
+  cursor: pointer;
+}
+.ossido-err-frame-toggle:hover { background: var(--ossido-color-surface-hover); }
+.ossido-err-frame-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.ossido-err-frame-badge {
+  flex: none;
+  padding: 0 10px;
+  border-radius: var(--ossido-radius-pill);
+  background: var(--ossido-color-success-surface);
+  border: 1px solid var(--ossido-color-success);
+  color: var(--ossido-color-success-text);
+  font-family: var(--ossido-font-sans);
+  font-size: var(--ossido-font-size-xs);
+  font-weight: var(--ossido-font-weight-bold);
+  letter-spacing: var(--ossido-letter-spacing-wide);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+/* The persistent dev indicator: a fixed container in a chosen corner holding a
+ * circular lightning badge (Next-style) with an error-count bubble, plus its
+ * pop-up menu. */
+.ossido-err-indicator {
+  position: fixed;
+  z-index: 2147483647;
+}
+.ossido-err-indicator--top-left { top: var(--ossido-space-6); left: var(--ossido-space-6); }
+.ossido-err-indicator--top-right { top: var(--ossido-space-6); right: var(--ossido-space-6); }
+.ossido-err-indicator--bottom-left { bottom: var(--ossido-space-6); left: var(--ossido-space-6); }
+.ossido-err-indicator--bottom-right { bottom: var(--ossido-space-6); right: var(--ossido-space-6); }
+
+.ossido-err-fab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 1px solid var(--ossido-color-border-strong);
+  border-radius: 50%;
+  background: var(--ossido-color-bg);
+  color: var(--ossido-color-text);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
+  cursor: pointer;
+  transition: transform 0.12s ease;
+}
+.ossido-err-fab:hover { transform: scale(1.06); }
+.ossido-err-fab svg { width: 22px; height: 22px; display: block; }
+.ossido-err-fab-count {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  box-sizing: border-box;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  border: 2px solid var(--ossido-color-bg);
+  background: var(--ossido-color-accent);
+  color: var(--ossido-color-on-accent);
+  font-family: var(--ossido-font-sans);
+  font-size: 11px;
+  font-weight: var(--ossido-font-weight-bold);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+/* Click-away catcher behind the open menu. */
+.ossido-err-menu-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483646;
+}
+
+/* The indicator's pop-up menu, anchored to the badge and opening toward the
+ * screen centre based on the chosen corner. */
+.ossido-err-menu {
+  position: absolute;
+  min-width: 232px;
+  padding: 6px;
+  background: var(--ossido-color-surface);
+  border: 1px solid var(--ossido-color-border);
+  border-radius: var(--ossido-radius);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
+  font-family: var(--ossido-font-sans);
+  color: var(--ossido-color-text);
+}
+.ossido-err-menu--top-left { top: calc(100% + 10px); left: 0; }
+.ossido-err-menu--top-right { top: calc(100% + 10px); right: 0; }
+.ossido-err-menu--bottom-left { bottom: calc(100% + 10px); left: 0; }
+.ossido-err-menu--bottom-right { bottom: calc(100% + 10px); right: 0; }
+
+.ossido-err-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ossido-space-3);
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  border-radius: var(--ossido-radius-sm);
+  background: transparent;
+  color: var(--ossido-color-text);
+  font: inherit;
+  font-size: var(--ossido-font-size-sm);
+  text-align: left;
+  cursor: pointer;
+}
+.ossido-err-menu-item:hover:not(:disabled) { background: var(--ossido-color-surface-hover); }
+.ossido-err-menu-item:disabled { color: var(--ossido-color-text-faint); cursor: default; }
+.ossido-err-menu-count {
+  flex: none;
+  min-width: 20px;
+  padding: 0 7px;
+  border-radius: var(--ossido-radius-pill);
+  background: var(--ossido-color-accent);
+  color: var(--ossido-color-on-accent);
+  font-size: var(--ossido-font-size-xs);
+  font-weight: var(--ossido-font-weight-bold);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+.ossido-err-menu-muted { color: var(--ossido-color-text-faint); font-size: var(--ossido-font-size-xs); }
+.ossido-err-menu-sep {
+  height: 1px;
+  margin: 6px 4px;
+  background: var(--ossido-color-border);
+}
+.ossido-err-menu-section { padding: 4px 10px 8px; }
+.ossido-err-menu-label {
+  display: block;
+  margin-bottom: 8px;
+  color: var(--ossido-color-text-subtle);
+  font-size: var(--ossido-font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--ossido-letter-spacing-wide);
+}
+.ossido-err-menu-corners {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+}
+.ossido-err-corner {
+  position: relative;
+  height: 30px;
+  border: 1px solid var(--ossido-color-border-strong);
+  border-radius: var(--ossido-radius-sm);
+  background: var(--ossido-color-surface-raised);
+  cursor: pointer;
+}
+.ossido-err-corner:hover { background: var(--ossido-color-surface-hover); }
+.ossido-err-corner--active {
+  border-color: var(--ossido-color-accent);
+  background: var(--ossido-color-surface-hover);
+}
+.ossido-err-corner-dot {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--ossido-color-text-subtle);
+}
+.ossido-err-corner--active .ossido-err-corner-dot { background: var(--ossido-color-accent); }
+.ossido-err-corner-dot--top-left { top: 5px; left: 5px; }
+.ossido-err-corner-dot--top-right { top: 5px; right: 5px; }
+.ossido-err-corner-dot--bottom-left { bottom: 5px; left: 5px; }
+.ossido-err-corner-dot--bottom-right { bottom: 5px; right: 5px; }
+`;
+
+//#endregion
+export { DEV_ERROR_STYLES };
+//# sourceMappingURL=devErrorStyles.js.map

package/dist/esm/components/devErrorStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devErrorStyles.js","names":[],"sources":["../../../src/components/devErrorStyles.ts"],"sourcesContent":["/**\n * Styles for the dev error overlay. The overlay presents as a floating window\n * over a dimmed backdrop (like Vite/Next) rather than an opaque full-screen\n * page, using the shared ossido-ui design tokens (see base.css).\n */\nexport const DEV_ERROR_STYLES = `\n.ossido-err-backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 2147483647;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  overflow: auto;\n  padding: var(--ossido-space-8);\n  background: rgba(0, 0, 0, 0.62);\n  font-family: var(--ossido-font-sans);\n  font-size: var(--ossido-font-size);\n  line-height: var(--ossido-line-height);\n  color: var(--ossido-color-text);\n}\n.ossido-err-window {\n  position: relative;\n  width: 100%;\n  max-width: 960px;\n  margin: auto;\n  background: var(--ossido-color-bg);\n  color: var(--ossido-color-text);\n  border: 1px solid var(--ossido-color-border);\n  border-top: 4px solid var(--ossido-color-accent);\n  border-radius: var(--ossido-radius);\n  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);\n  overflow: hidden;\n}\n/* Apply the sans token to every overlay element (0-1-0 beats an app-level\n * \"* { font-family }\" reset at 0-0-0). */\n.ossido-err-window * { font-family: var(--ossido-font-sans); }\n\n/* Pager header: prev/next through the collected errors, plus a dismiss. */\n.ossido-err-pager {\n  display: flex;\n  align-items: center;\n  gap: var(--ossido-space-3);\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--ossido-color-border);\n  background: var(--ossido-color-surface);\n}\n.ossido-err-pager-count {\n  font-variant-numeric: tabular-nums;\n  font-size: var(--ossido-font-size-sm);\n  color: var(--ossido-color-text-muted);\n}\n.ossido-err-pager-kind {\n  font-size: var(--ossido-font-size-xs);\n  text-transform: uppercase;\n  letter-spacing: var(--ossido-letter-spacing-wide);\n  color: var(--ossido-color-text-subtle);\n}\n.ossido-err-pager-occurrences {\n  flex: none;\n  padding: 1px 7px;\n  border-radius: var(--ossido-radius-pill);\n  background: var(--ossido-color-accent);\n  color: var(--ossido-color-on-accent);\n  font-size: var(--ossido-font-size-xs);\n  font-weight: var(--ossido-font-weight-bold);\n  font-variant-numeric: tabular-nums;\n}\n.ossido-err-pager-spacer { flex: 1 1 auto; }\n.ossido-err-nav {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: 1px solid var(--ossido-color-border-strong);\n  border-radius: var(--ossido-radius-sm);\n  background: var(--ossido-color-surface-raised);\n  color: var(--ossido-color-text);\n  font: inherit;\n  line-height: 1;\n  cursor: pointer;\n}\n.ossido-err-nav:hover:not(:disabled) { background: var(--ossido-color-surface-hover); }\n.ossido-err-nav:disabled { opacity: 0.4; cursor: default; }\n.ossido-err-nav svg { width: 15px; height: 15px; display: block; }\n.ossido-err-dismiss {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: 1px solid transparent;\n  border-radius: var(--ossido-radius-sm);\n  background: transparent;\n  color: var(--ossido-color-text-muted);\n  font: inherit;\n  font-size: 18px;\n  line-height: 1;\n  cursor: pointer;\n}\n.ossido-err-dismiss:hover { background: var(--ossido-color-surface-hover); color: var(--ossido-color-text); }\n\n.ossido-err-body { padding: var(--ossido-space-8); }\n\n.ossido-err-badge {\n  display: inline-block;\n  padding: 2px 10px;\n  border-radius: var(--ossido-radius-pill);\n  background: var(--ossido-color-accent);\n  color: var(--ossido-color-on-accent);\n  font-size: var(--ossido-font-size-xs);\n  font-weight: var(--ossido-font-weight-bold);\n  letter-spacing: var(--ossido-letter-spacing-wide);\n  text-transform: uppercase;\n}\n.ossido-err-name {\n  margin: var(--ossido-space-3) 0 var(--ossido-space-4);\n  font-size: var(--ossido-font-size-xl);\n  font-weight: var(--ossido-font-weight-bold);\n  color: var(--ossido-color-accent-text);\n  word-break: break-word;\n}\n.ossido-err-message-card {\n  border: 1px solid var(--ossido-color-border);\n  border-radius: var(--ossido-radius);\n  background: var(--ossido-color-surface);\n  padding: 14px;\n  margin-bottom: var(--ossido-space-6);\n  gap: var(--ossido-space-2);\n  display: flex;\n}\n.ossido-err-message-card svg {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--ossido-color-accent-text);\n  flex: none;\n}\n.ossido-err-message {\n  margin: 0;\n  color: var(--ossido-color-accent-text);\n  white-space: pre-wrap;\n  word-break: break-word;\n  line-height: 1.5rem;\n  font-size: 1rem;\n}\n.ossido-err-source,\n.ossido-err-source *,\n.ossido-err-stack,\n.ossido-err-stack *,\n.ossido-err-frame-code,\n.ossido-err-rawstack {\n  font-family: var(--ossido-font-mono);\n}\n.ossido-err-source {\n  border: 1px solid var(--ossido-color-border);\n  border-radius: var(--ossido-radius);\n  overflow: hidden;\n  margin-bottom: var(--ossido-space-6);\n}\n.ossido-err-source-file {\n  padding: 8px 14px;\n  background: var(--ossido-color-surface);\n  border-bottom: 1px solid var(--ossido-color-border);\n  color: var(--ossido-color-text-muted);\n  font-size: var(--ossido-font-size-sm);\n  word-break: break-all;\n}\n.ossido-err-code { margin: 0; overflow-x: auto; }\n.ossido-err-skel-bar {\n  display: inline-block;\n  height: 0.7em;\n  vertical-align: middle;\n  border-radius: 3px;\n  background: var(--ossido-color-border-strong);\n  animation: ossido-err-skel-pulse 1.3s ease-in-out infinite;\n}\n@keyframes ossido-err-skel-pulse {\n  0%, 100% { opacity: 0.45; }\n  50% { opacity: 0.9; }\n}\n.ossido-err-code-line { display: flex; white-space: pre; }\n.ossido-err-code-line--error { background: var(--ossido-color-danger-surface); }\n.ossido-err-gutter {\n  width: 3.5rem;\n  flex: none;\n  padding: 0 12px;\n  text-align: right;\n  color: var(--ossido-color-text-faint);\n  user-select: none;\n}\n.ossido-err-code-line--error .ossido-err-gutter { color: var(--ossido-color-accent-text); }\n.ossido-err-code-text { padding-right: 14px; color: var(--ossido-color-text); }\n.ossido-err-frame-code {\n  margin: 0 0 var(--ossido-space-6);\n  padding: 12px 14px;\n  border: 1px solid var(--ossido-color-border);\n  border-radius: var(--ossido-radius);\n  background: var(--ossido-color-surface);\n  overflow-x: auto;\n  color: var(--ossido-color-text);\n  font-size: var(--ossido-font-size-sm);\n  white-space: pre;\n}\n.ossido-err-rawstack {\n  margin: 0;\n  padding: 12px 14px;\n  border: 1px solid var(--ossido-color-border);\n  border-radius: var(--ossido-radius);\n  overflow-x: auto;\n  color: var(--ossido-color-text-muted);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.ossido-err-stack { border: 1px solid var(--ossido-color-border); border-radius: var(--ossido-radius); overflow: hidden; }\n.ossido-err-frame { padding: 8px 14px; border-top: 1px solid var(--ossido-color-border); }\n.ossido-err-frame:first-child { border-top: none; }\n.ossido-err-frame--app { background: var(--ossido-color-surface); }\n.ossido-err-frame--vendor { opacity: 0.55; }\n.ossido-err-fn { color: var(--ossido-color-text); }\n.ossido-err-loc { color: var(--ossido-color-text-subtle); font-size: var(--ossido-font-size-sm); word-break: break-all; }\n.ossido-err-actions { margin-top: var(--ossido-space-6); display: flex; gap: var(--ossido-space-3); }\n.ossido-err-btn {\n  padding: 6px 16px;\n  border: 1px solid var(--ossido-color-border-strong);\n  border-radius: var(--ossido-radius-sm);\n  background: var(--ossido-color-surface-raised);\n  color: var(--ossido-color-text);\n  font: inherit;\n  cursor: pointer;\n}\n.ossido-err-btn:hover { background: var(--ossido-color-surface-hover); }\n.ossido-err-hint { margin-top: var(--ossido-space-4); color: var(--ossido-color-text-faint); font-size: var(--ossido-font-size-xs); }\n.ossido-err-frame-toggle {\n  display: block;\n  width: 100%;\n  padding: 8px 14px;\n  text-align: left;\n  border: none;\n  border-top: 1px solid var(--ossido-color-border);\n  background: var(--ossido-color-surface-raised);\n  color: var(--ossido-color-text-subtle);\n  font: inherit;\n  font-size: var(--ossido-font-size-sm);\n  cursor: pointer;\n}\n.ossido-err-frame-toggle:hover { background: var(--ossido-color-surface-hover); }\n.ossido-err-frame-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n.ossido-err-frame-badge {\n  flex: none;\n  padding: 0 10px;\n  border-radius: var(--ossido-radius-pill);\n  background: var(--ossido-color-success-surface);\n  border: 1px solid var(--ossido-color-success);\n  color: var(--ossido-color-success-text);\n  font-family: var(--ossido-font-sans);\n  font-size: var(--ossido-font-size-xs);\n  font-weight: var(--ossido-font-weight-bold);\n  letter-spacing: var(--ossido-letter-spacing-wide);\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n/* The persistent dev indicator: a fixed container in a chosen corner holding a\n * circular lightning badge (Next-style) with an error-count bubble, plus its\n * pop-up menu. */\n.ossido-err-indicator {\n  position: fixed;\n  z-index: 2147483647;\n}\n.ossido-err-indicator--top-left { top: var(--ossido-space-6); left: var(--ossido-space-6); }\n.ossido-err-indicator--top-right { top: var(--ossido-space-6); right: var(--ossido-space-6); }\n.ossido-err-indicator--bottom-left { bottom: var(--ossido-space-6); left: var(--ossido-space-6); }\n.ossido-err-indicator--bottom-right { bottom: var(--ossido-space-6); right: var(--ossido-space-6); }\n\n.ossido-err-fab {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  padding: 0;\n  border: 1px solid var(--ossido-color-border-strong);\n  border-radius: 50%;\n  background: var(--ossido-color-bg);\n  color: var(--ossido-color-text);\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);\n  cursor: pointer;\n  transition: transform 0.12s ease;\n}\n.ossido-err-fab:hover { transform: scale(1.06); }\n.ossido-err-fab svg { width: 22px; height: 22px; display: block; }\n.ossido-err-fab-count {\n  position: absolute;\n  top: -5px;\n  right: -5px;\n  box-sizing: border-box;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 5px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 10px;\n  border: 2px solid var(--ossido-color-bg);\n  background: var(--ossido-color-accent);\n  color: var(--ossido-color-on-accent);\n  font-family: var(--ossido-font-sans);\n  font-size: 11px;\n  font-weight: var(--ossido-font-weight-bold);\n  font-variant-numeric: tabular-nums;\n  line-height: 1;\n}\n\n/* Click-away catcher behind the open menu. */\n.ossido-err-menu-scrim {\n  position: fixed;\n  inset: 0;\n  z-index: 2147483646;\n}\n\n/* The indicator's pop-up menu, anchored to the badge and opening toward the\n * screen centre based on the chosen corner. */\n.ossido-err-menu {\n  position: absolute;\n  min-width: 232px;\n  padding: 6px;\n  background: var(--ossido-color-surface);\n  border: 1px solid var(--ossido-color-border);\n  border-radius: var(--ossido-radius);\n  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);\n  font-family: var(--ossido-font-sans);\n  color: var(--ossido-color-text);\n}\n.ossido-err-menu--top-left { top: calc(100% + 10px); left: 0; }\n.ossido-err-menu--top-right { top: calc(100% + 10px); right: 0; }\n.ossido-err-menu--bottom-left { bottom: calc(100% + 10px); left: 0; }\n.ossido-err-menu--bottom-right { bottom: calc(100% + 10px); right: 0; }\n\n.ossido-err-menu-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--ossido-space-3);\n  width: 100%;\n  padding: 8px 10px;\n  border: none;\n  border-radius: var(--ossido-radius-sm);\n  background: transparent;\n  color: var(--ossido-color-text);\n  font: inherit;\n  font-size: var(--ossido-font-size-sm);\n  text-align: left;\n  cursor: pointer;\n}\n.ossido-err-menu-item:hover:not(:disabled) { background: var(--ossido-color-surface-hover); }\n.ossido-err-menu-item:disabled { color: var(--ossido-color-text-faint); cursor: default; }\n.ossido-err-menu-count {\n  flex: none;\n  min-width: 20px;\n  padding: 0 7px;\n  border-radius: var(--ossido-radius-pill);\n  background: var(--ossido-color-accent);\n  color: var(--ossido-color-on-accent);\n  font-size: var(--ossido-font-size-xs);\n  font-weight: var(--ossido-font-weight-bold);\n  font-variant-numeric: tabular-nums;\n  text-align: center;\n}\n.ossido-err-menu-muted { color: var(--ossido-color-text-faint); font-size: var(--ossido-font-size-xs); }\n.ossido-err-menu-sep {\n  height: 1px;\n  margin: 6px 4px;\n  background: var(--ossido-color-border);\n}\n.ossido-err-menu-section { padding: 4px 10px 8px; }\n.ossido-err-menu-label {\n  display: block;\n  margin-bottom: 8px;\n  color: var(--ossido-color-text-subtle);\n  font-size: var(--ossido-font-size-xs);\n  text-transform: uppercase;\n  letter-spacing: var(--ossido-letter-spacing-wide);\n}\n.ossido-err-menu-corners {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 6px;\n}\n.ossido-err-corner {\n  position: relative;\n  height: 30px;\n  border: 1px solid var(--ossido-color-border-strong);\n  border-radius: var(--ossido-radius-sm);\n  background: var(--ossido-color-surface-raised);\n  cursor: pointer;\n}\n.ossido-err-corner:hover { background: var(--ossido-color-surface-hover); }\n.ossido-err-corner--active {\n  border-color: var(--ossido-color-accent);\n  background: var(--ossido-color-surface-hover);\n}\n.ossido-err-corner-dot {\n  position: absolute;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--ossido-color-text-subtle);\n}\n.ossido-err-corner--active .ossido-err-corner-dot { background: var(--ossido-color-accent); }\n.ossido-err-corner-dot--top-left { top: 5px; left: 5px; }\n.ossido-err-corner-dot--top-right { top: 5px; right: 5px; }\n.ossido-err-corner-dot--bottom-left { bottom: 5px; left: 5px; }\n.ossido-err-corner-dot--bottom-right { bottom: 5px; right: 5px; }\n`;\n"],"mappings":";;;;;;AAKA,MAAa,mBAAmB"}

package/dist/esm/index.d.ts

@@ -0,0 +1,11 @@
+export { BaseStyles } from './components/BaseStyles';
+export { DefaultScreen } from './components/DefaultScreen';
+export { DefaultError } from './components/DefaultError';
+export { DefaultLoading } from './components/DefaultLoading';
+export { DevErrorOverlay } from './components/DevErrorOverlay';
+export { DevErrorOverlayHost } from './components/DevErrorOverlayHost';
+export { DevErrorReporter } from './components/DevErrorReporter';
+export { devErrorStore } from './components/devErrorStore';
+export type { DevErrorKind, DevBuildError } from './components/devErrorStore';
+export { warmDevErrorSource } from './components/devErrorSource';
+export type { OssidoErrorProps, OssidoErrorWithSource, ServerErrorSource, ErrorComponent, } from './types';

package/dist/esm/index.js

@@ -0,0 +1,11 @@
+import { BaseStyles } from "./components/BaseStyles.js";
+import { DefaultScreen } from "./components/DefaultScreen.js";
+import { DefaultError } from "./components/DefaultError.js";
+import { DefaultLoading } from "./components/DefaultLoading.js";
+import { warmDevErrorSource } from "./components/devErrorSource.js";
+import { DevErrorOverlay } from "./components/DevErrorOverlay.js";
+import { devErrorStore } from "./components/devErrorStore.js";
+import { DevErrorOverlayHost } from "./components/DevErrorOverlayHost.js";
+import { DevErrorReporter } from "./components/DevErrorReporter.js";
+
+export { BaseStyles, DefaultError, DefaultLoading, DefaultScreen, DevErrorOverlay, DevErrorOverlayHost, DevErrorReporter, devErrorStore, warmDevErrorSource };

package/dist/esm/types.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentType } from 'react';
+/**
+ * The panic-site source file, embedded by the server (dev only) so the overlay
+ * can show a highlighted excerpt — Rust has no sourcemap to resolve one from.
+ * @see crates/ossido/src/server_error.rs (`ErrorSource`)
+ */
+export interface ServerErrorSource {
+    file: string;
+    line: number;
+    column: number;
+    content: string;
+}
+/**
+ * An `Error` carrying the server-provided panic-site source, used by the overlay
+ * to render the excerpt. Attached by `serverErrorToError` in ossido-router.
+ */
+export interface OssidoErrorWithSource extends Error {
+    ossidoServerSource?: ServerErrorSource;
+}
+/** Props passed to a user `error.tsx` component (and the default error UI). */
+export interface OssidoErrorProps {
+    error: Error;
+    reset: () => void;
+}
+/** An `error.tsx` component. Rendered by the route error boundary. */
+export type ErrorComponent = ComponentType<OssidoErrorProps>;

package/dist/esm/vite/error-overlay.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Bridges Vite's HMR error overlay into Ossido's unified dev error overlay.
+ *
+ * Vite's client creates an `ErrorOverlay` custom element on a build/compile
+ * error and calls `.close()` on it once the error clears. Rather than let Vite
+ * render its own overlay, `ErrorOverlayVitePlugin` patches the client so that
+ * `ErrorOverlay` is *this* class — which renders nothing and instead forwards
+ * the error to the ossido dev error store (`window.__OSSIDO_DEV_ERRORS__`). Build
+ * errors then appear in the same browsable React overlay as runtime errors.
+ *
+ * The patch matches on the exact class declaration string (which only appears
+ * in Vite's client) instead of a module id, so it survives changes to how the
+ * client is resolved/served.
+ *
+ * @see packages/ossido-ui/src/components/devErrorStore.ts (the bridge target)
+ * @see https://github.com/tuono-labs/tuono/pull/607
+ */
+import type { ErrorPayload, Plugin } from 'vite';
+declare const HTMLElement: typeof globalThis.HTMLElement;
+/**
+ * The element Vite instantiates on a build error. It never renders; it reports
+ * the error to the ossido store (buffering if the store hasn't loaded yet) and
+ * clears it on `.close()`. This class's *source* (via `toString()`) is what the
+ * plugin injects into Vite's client, so it must not reference anything outside
+ * its own body other than browser globals.
+ */
+export declare class ErrorOverlay extends HTMLElement {
+    constructor(err: ErrorPayload['err']);
+    close(): void;
+}
+export declare const ErrorOverlayVitePlugin: Plugin;
+export {};

package/dist/esm/vite/error-overlay.js

@@ -0,0 +1,49 @@
+//#region src/vite/error-overlay.ts
+const HTMLElement = globalThis.HTMLElement ?? class {};
+/**
+* The element Vite instantiates on a build error. It never renders; it reports
+* the error to the ossido store (buffering if the store hasn't loaded yet) and
+* clears it on `.close()`. This class's *source* (via `toString()`) is what the
+* plugin injects into Vite's client, so it must not reference anything outside
+* its own body other than browser globals.
+*/
+var ErrorOverlay = class extends HTMLElement {
+	constructor(err) {
+		super();
+		const globalWindow = window;
+		const build = {
+			message: err.message,
+			stack: err.stack,
+			id: err.id,
+			frame: err.frame,
+			plugin: err.plugin,
+			loc: err.loc
+		};
+		const store = globalWindow["__OSSIDO_DEV_ERRORS__"];
+		if (typeof store?.addBuildError === "function") store.addBuildError(build);
+		else (globalWindow["__OSSIDO_DEV_ERRORS_BUFFER__"] ??= []).push(build);
+	}
+	close() {
+		window["__OSSIDO_DEV_ERRORS__"]?.clearBuildErrors?.();
+		this.parentNode?.removeChild(this);
+	}
+};
+function getOverlayCode() {
+	return `const ErrorOverlay = ${ErrorOverlay.toString()};`;
+}
+const VITE_OVERLAY_CLASS_DECL = "var ErrorOverlay = class extends HTMLElement";
+function patchOverlay(code) {
+	return code.replace(VITE_OVERLAY_CLASS_DECL, getOverlayCode() + "\nvar ViteErrorOverlay = class extends HTMLElement");
+}
+const ErrorOverlayVitePlugin = {
+	name: "ossido-error-overlay-plugin",
+	transform(code, _id, opts) {
+		if (opts?.ssr) return;
+		if (!code.includes(VITE_OVERLAY_CLASS_DECL)) return;
+		return patchOverlay(code);
+	}
+};
+
+//#endregion
+export { ErrorOverlay, ErrorOverlayVitePlugin };
+//# sourceMappingURL=error-overlay.js.map