@appstrata/dev 0.1.0

package/dist/dev-overlay.css

@@ -0,0 +1,450 @@
+/* ── Dev Overlay ── shared between standalone and embedded players ──── */
+
+#__appstrata-dev-root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+}
+
+/* ── Overlay header (hidden by default, reveals on hover) ──────────── */
+
+#__appstrata-dev-root .player-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100000;
+  transform: translateY(-100%);
+  transition: transform 200ms ease;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.15);
+}
+
+/* Invisible hover bridge — closes the gap between the overlay and the handle
+   so the mouse doesn't leave the hover target when crossing between them. */
+#__appstrata-dev-root .player-overlay::before {
+  content: '';
+  position: absolute;
+  bottom: -26px;
+  left: 0;
+  right: 0;
+  height: 26px;
+  cursor: pointer;
+}
+
+#__appstrata-dev-root .player-overlay::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: -17px;
+  transform: translateX(-50%);
+  width: 100px;
+  height: 4px;
+  background: rgba(128, 128, 128, 0.4);
+  border-radius: 2px;
+  cursor: pointer;
+  backdrop-filter: blur(4px);
+}
+
+#__appstrata-dev-root .player-overlay:hover {
+  transform: translateY(0);
+}
+
+#__appstrata-dev-root .player-header {
+  background: #16213e;
+  padding: 10px 14px;
+  color: #00d4ff;
+  font-size: 14px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 10px;
+}
+
+#__appstrata-dev-root .status-indicator {
+  width: 8px;
+  height: 8px;
+  background: #00ff88;
+  border-radius: 50%;
+  animation: __as-dev-pulse 2s infinite;
+}
+
+#__appstrata-dev-root .status-indicator.completed {
+  background: #6c757d;
+  animation: __as-dev-completed-pulse 2s infinite;
+}
+
+@keyframes __as-dev-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(0.9);
+  }
+}
+
+@keyframes __as-dev-completed-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.1);
+  }
+}
+
+#__appstrata-dev-root .player-title {
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+#__appstrata-dev-root .player-mode {
+  margin-left: auto;
+  opacity: 0.6;
+  font-size: 12px;
+  min-width: 0;
+}
+
+#__appstrata-dev-root .header-auto-zoom {
+  font-size: 12px;
+  color: #8890a4;
+  white-space: nowrap;
+  border-left: 1px solid rgba(0, 212, 255, 0.15);
+  padding-left: 10px;
+}
+
+#__appstrata-dev-root .header-auto-zoom .res-value {
+  color: #00d4ff;
+  font-weight: 600;
+}
+
+#__appstrata-dev-root .header-resolution {
+  font-size: 12px;
+  color: #8890a4;
+  border-left: 1px solid rgba(0, 212, 255, 0.15);
+  padding-left: 10px;
+}
+
+#__appstrata-dev-root .header-resolution .res-value {
+  color: #00d4ff;
+  font-family: 'Courier New', monospace;
+  font-weight: 600;
+}
+
+#__appstrata-dev-root .header-resolution .res-separator {
+  margin: 0 8px;
+  opacity: 0.3;
+}
+
+/* ── Message stats bar ──────────────────────────────────────────────── */
+
+#__appstrata-dev-root .message-stats {
+  background: #1a1f3a;
+  padding: 8px 20px;
+  display: flex;
+  gap: 24px;
+  font-size: 12px;
+  color: #8890a4;
+}
+
+#__appstrata-dev-root .message-stat {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+#__appstrata-dev-root .message-stat.clickable {
+  cursor: pointer;
+  padding: 4px 10px;
+  margin: -4px 0;
+  border-radius: 6px;
+  transition: background 0.15s;
+}
+
+#__appstrata-dev-root .message-stat.clickable:hover {
+  background: rgba(0, 212, 255, 0.08);
+}
+
+#__appstrata-dev-root .message-stat-label {
+  font-weight: 500;
+}
+
+#__appstrata-dev-root .message-stat-value {
+  font-family: 'Courier New', monospace;
+  color: #00d4ff;
+  font-weight: 600;
+}
+
+#__appstrata-dev-root .message-status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #00ff88;
+  animation: __as-dev-pulse 2s infinite;
+}
+
+/* ── Message popup overlay ──────────────────────────────────────────── */
+
+#__appstrata-dev-root .msg-popup-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 100000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#__appstrata-dev-root .msg-popup {
+  background: #12132a;
+  border: 1px solid rgba(0, 212, 255, 0.15);
+  border-radius: 10px;
+  width: min(680px, 90vw);
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
+#__appstrata-dev-root .msg-popup-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 20px;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.1);
+}
+
+#__appstrata-dev-root .msg-popup-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #00d4ff;
+}
+
+#__appstrata-dev-root .msg-popup-copy-all {
+  background: none;
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  color: #8890a4;
+  font-size: 11px;
+  cursor: pointer;
+  padding: 4px 10px;
+  border-radius: 6px;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+#__appstrata-dev-root .msg-popup-copy-all:hover {
+  color: #00d4ff;
+  border-color: rgba(0, 212, 255, 0.5);
+}
+
+#__appstrata-dev-root .msg-popup-close {
+  background: none;
+  border: none;
+  color: #8890a4;
+  font-size: 22px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+  transition: color 0.15s;
+  margin-left: auto;
+}
+
+#__appstrata-dev-root .msg-popup-close:hover {
+  color: #fff;
+}
+
+#__appstrata-dev-root .msg-popup-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+#__appstrata-dev-root .msg-popup-empty {
+  color: #8890a4;
+  text-align: center;
+  padding: 40px 0;
+  font-size: 13px;
+}
+
+/* ── Messenger-style message bubbles ─────────────────────────────────── */
+
+#__appstrata-dev-root .msg-row {
+  display: flex;
+}
+
+#__appstrata-dev-root .msg-row.host-to-app {
+  justify-content: flex-start;
+}
+
+#__appstrata-dev-root .msg-row.app-to-host {
+  justify-content: flex-end;
+}
+
+#__appstrata-dev-root .msg-bubble {
+  max-width: 85%;
+  border-radius: 10px;
+  padding: 10px 14px;
+  font-size: 12px;
+  position: relative;
+}
+
+#__appstrata-dev-root .msg-row.host-to-app .msg-bubble {
+  background: #1a2744;
+  border: 1px solid rgba(0, 212, 255, 0.12);
+  border-bottom-left-radius: 3px;
+}
+
+#__appstrata-dev-root .msg-row.app-to-host .msg-bubble {
+  background: #2a1a44;
+  border: 1px solid rgba(160, 100, 255, 0.15);
+  border-bottom-right-radius: 3px;
+}
+
+#__appstrata-dev-root .msg-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+#__appstrata-dev-root .msg-direction {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+#__appstrata-dev-root .msg-row.host-to-app .msg-direction {
+  color: #00d4ff;
+}
+
+#__appstrata-dev-root .msg-row.app-to-host .msg-direction {
+  color: #a064ff;
+}
+
+#__appstrata-dev-root .msg-type {
+  font-weight: 700;
+  font-size: 12px;
+  color: #e0e0e0;
+}
+
+#__appstrata-dev-root .msg-time {
+  font-size: 10px;
+  color: #5a6178;
+  margin-left: auto;
+}
+
+/* ── Collapsible JSON tree ───────────────────────────────────────────── */
+
+#__appstrata-dev-root .msg-json {
+  margin-top: 6px;
+  font-family: 'Courier New', monospace;
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+#__appstrata-dev-root .json-toggle {
+  display: inline-block;
+  width: 14px;
+  cursor: pointer;
+  user-select: none;
+  color: #5a6178;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+#__appstrata-dev-root .json-toggle:hover {
+  color: #00d4ff;
+}
+
+#__appstrata-dev-root .json-line {
+  display: flex;
+  align-items: flex-start;
+}
+
+#__appstrata-dev-root .json-indent {
+  display: inline-block;
+  width: 16px;
+  flex-shrink: 0;
+}
+
+#__appstrata-dev-root .json-children {
+  display: block;
+}
+
+#__appstrata-dev-root .json-collapsed > .json-children {
+  display: none;
+}
+
+#__appstrata-dev-root .json-collapsed > .json-line > .json-toggle::after {
+  content: '';
+}
+
+#__appstrata-dev-root .json-key {
+  color: #c792ea;
+}
+
+#__appstrata-dev-root .json-string {
+  color: #c3e88d;
+}
+
+#__appstrata-dev-root .json-number {
+  color: #f78c6c;
+}
+
+#__appstrata-dev-root .json-boolean {
+  color: #89ddff;
+}
+
+#__appstrata-dev-root .json-null {
+  color: #5a6178;
+  font-style: italic;
+}
+
+#__appstrata-dev-root .json-bracket {
+  color: #8890a4;
+}
+
+#__appstrata-dev-root .json-summary {
+  color: #5a6178;
+  font-style: italic;
+  cursor: pointer;
+}
+
+/* ── Resize resolution toast ────────────────────────────────────────── */
+
+#__appstrata-dev-root .resize-info {
+  position: absolute;
+  top: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 99;
+  background: rgba(0, 0, 0, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  padding: 6px 16px;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.85);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 300ms ease;
+  backdrop-filter: blur(6px);
+}
+
+#__appstrata-dev-root .resize-info.visible {
+  opacity: 0.3;
+}
+
+#__appstrata-dev-root .resize-info .res-value {
+  color: #fff;
+  font-family: 'Courier New', monospace;
+  font-weight: 600;
+}
+
+#__appstrata-dev-root .resize-info .res-separator {
+  margin: 0 8px;
+  opacity: 0.3;
+}

package/dist/dev-overlay.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Shared dev overlay UI.
+ *
+ * Creates a hover-reveal drawer (status, title, mode, auto-zoom, resolution,
+ * message stats) and a messenger-style message popup. Used by both the
+ * standalone iframe player and the embedded Vite-plugin player.
+ */
+import type { AutoZoomMode } from './types.js';
+export type MessageDirection = "app-to-host" | "host-to-app";
+/** Subset of the dev-server context that the overlay needs. */
+export interface DevOverlayContext {
+    mode?: string;
+    environment?: string;
+    viewportWidth?: number;
+    viewportHeight?: number;
+    autoZoom?: AutoZoomMode;
+}
+export interface DevOverlayOptions {
+    container: HTMLElement;
+    /** Element whose clientWidth/clientHeight report the "effective" resolution. */
+    measureElement: HTMLElement;
+    context: DevOverlayContext;
+    /**
+     * When true (default), injects the overlay CSS as a <style> tag.
+     * Set to false when the CSS is already loaded via a <link> tag.
+     */
+    injectStyles?: boolean;
+    /** When set, shows a "Relay Active" indicator and a "Dropped" counter. */
+    relay?: {
+        playerUrl: string;
+    };
+    /**
+     * When true, protocol messages with op `log` are silently dropped from the
+     * message log and stats counters. Defaults to false.
+     * @internal Not yet exposed through higher-level configuration.
+     */
+    dropLogMessages?: boolean;
+}
+export interface DevOverlay {
+    updateResolution(): void;
+    /** Update mode text, target resolution, and auto-zoom label from a new context. */
+    updateContext(context: DevOverlayContext): void;
+    setCompleted(): void;
+    flashResizeToast(): void;
+    /** Record an intercepted protocol message and update the stats counters. */
+    logMessage(direction: MessageDirection, message: unknown): void;
+    /** Update the relay "Dropped" counter (only visible when relay option was set). */
+    setDroppedCount(count: number): void;
+    /** Update whether protocol messages with op `log` are dropped from the panel. */
+    setDropLogMessages(value: boolean): void;
+    /** The overlay drawer element — append extra sections here. */
+    overlayContentEl: HTMLElement;
+    destroy(): void;
+}
+export declare function createDevOverlay(options: DevOverlayOptions): DevOverlay;
+//# sourceMappingURL=dev-overlay.d.ts.map

package/dist/dev-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-overlay.d.ts","sourceRoot":"","sources":["../src/dev-overlay.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAK/C,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,aAAa,CAAC;AAE7D,+DAA+D;AAC/D,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB;AAWD,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,WAAW,CAAC;IACvB,gFAAgF;IAChF,cAAc,EAAE,WAAW,CAAC;IAC5B,OAAO,EAAE,iBAAiB,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0EAA0E;IAC1E,KAAK,CAAC,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,UAAU;IACzB,gBAAgB,IAAI,IAAI,CAAC;IACzB,mFAAmF;IACnF,aAAa,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAChD,YAAY,IAAI,IAAI,CAAC;IACrB,gBAAgB,IAAI,IAAI,CAAC;IACzB,4EAA4E;IAC5E,UAAU,CAAC,SAAS,EAAE,gBAAgB,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAChE,mFAAmF;IACnF,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,iFAAiF;IACjF,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACzC,+DAA+D;IAC/D,gBAAgB,EAAE,WAAW,CAAC;IAC9B,OAAO,IAAI,IAAI,CAAC;CACjB;AAkHD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,iBAAiB,GAAG,UAAU,CAkTvE"}