conversation-replay 0.1.6 → 0.1.8

package/README.md

@@ -180,6 +180,14 @@ meta:
   hideHeaderInIframe: true       # Hide header when embedded (default: true)
 ```
 
+Timing & Visual:
+```yaml
+meta:
+  timerStyle: circle             # circle | bar (countdown display style)
+  cornerStyle: rounded           # rounded | straight (border radius)
+  initialBlur: 1                 # Blur amount in px for initial play overlay (default: 1)
+```
+
 Custom colors (New Slate/Indigo Default Palette):
 You can override any color, but the defaults are designed for a premium look:
 ```yaml
@@ -193,6 +201,8 @@ meta:
     rightBg: "#f1f5f9"           # Slate 100 (Right/AI bubble)
     rightBorder: "transparent"   # Border for right bubble
     tabInactiveColor: "#94a3b8"  # Slate 400
+    annotationText: "#475569"    # Slate 600 (Annotation text color)
+    annotationBorder: "#cbd5e1"  # Slate 300 (Annotation accent bar)
 ```
 
 ## Output Features

package/dist/cli.js

@@ -7361,6 +7361,12 @@ function generateColorOverrides(colors) {
   if (colors.tabInactiveColor) {
     overrides.push(`--tab-inactive-color: ${colors.tabInactiveColor};`);
   }
+  if (colors.annotationText) {
+    overrides.push(`--annotation-text: ${colors.annotationText};`);
+  }
+  if (colors.annotationBorder) {
+    overrides.push(`--annotation-border: ${colors.annotationBorder};`);
+  }
   if (overrides.length === 0)
     return "";
   return `
@@ -7370,10 +7376,11 @@ function generateColorOverrides(colors) {
     }
   `;
 }
-function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
+function generateCss(theme, hasMultipleScenarios, colors, cornerStyle, initialBlur) {
   const colorOverrides = generateColorOverrides(colors);
   const radius = cornerStyle === "straight" ? "0" : "8px";
   const radiusLg = cornerStyle === "straight" ? "0" : "12px";
+  const blurAmount = initialBlur ?? 1;
   const tabCss = hasMultipleScenarios ? `
     /* Tabs - browser-style integrated with canvas */
     .tabs {
@@ -7391,17 +7398,15 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
       border: 1px solid transparent;
       border-bottom: none;
       background: transparent;
-      color: var(--tab-inactive-color, var(--text-muted));
+      color: var(--tab-inactive-color, var(--text-secondary));
       border-radius: var(--radius) var(--radius) 0 0;
       cursor: pointer;
       font-size: 13px;
       font-weight: 500;
       transition: all 0.2s;
-      opacity: 0.75;
     }
 
     .tab:hover {
-      opacity: 0.9;
       color: var(--text-primary);
     }
 
@@ -7409,7 +7414,6 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
       background: var(--bg-chat);
       color: var(--text-primary);
       border-color: var(--border-color);
-      opacity: 1;
       position: relative;
     }
 
@@ -7480,7 +7484,7 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
       
       --annotation-bg: transparent;
       --annotation-border: var(--color-slate-300);
-      --annotation-text: var(--color-slate-500);
+      --annotation-text: var(--color-slate-600);
 
       --transition-bg: var(--color-primary-50);
       --transition-border: var(--color-primary-300);
@@ -7518,7 +7522,7 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
         --ai-text: #e2e8f0;
 
         --annotation-border: #475569;
-        --annotation-text: #94a3b8;
+        --annotation-text: #cbd5e1;
 
         --border-color: #334155; /* Slate 700 */
         
@@ -7551,7 +7555,7 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
         --ai-text: #e2e8f0;
 
         --annotation-border: #475569;
-        --annotation-text: #94a3b8;
+        --annotation-text: #cbd5e1;
 
         --border-color: #334155; /* Slate 700 */
         
@@ -7730,16 +7734,15 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
 
     body.in-iframe .chat-wrapper {
         box-shadow: none !important; /* Remove wrapper shadow */
-        background: transparent !important;
     }
 
     body.in-iframe .chat-container {
       flex: 1;
       min-height: 0;
-      box-shadow: none !important; /* Remove heavy shadow in iframe usually */
-      border: none !important;
-      background: transparent !important;
-      border-radius: 0 !important; /* Flatten corners for full bleed if needed, or keep them */
+      max-height: none !important; /* Remove height constraint in iframe */
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; /* Subtle shadow in iframe */
+      /* Keep border and background for visual definition */
+      margin-bottom: clamp(70px, 15vh, 120px); /* Responsive space for fixed controls */
     }
 
     body.in-iframe .controls-wrapper {
@@ -7753,9 +7756,6 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
       z-index: 20;
     }
 
-    body.in-iframe .play-overlay {
-        border-radius: 0 !important;
-    }
 
     .chat-messages {
       display: flex;
@@ -7774,8 +7774,8 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
       align-items: center;
       justify-content: center;
       background: rgba(255, 255, 255, 0.1); /* Much more transparent */
-      backdrop-filter: blur(1.5px); /* Very subtle blur */
-      -webkit-backdrop-filter: blur(1.5px);
+      backdrop-filter: blur(${blurAmount}px); /* Subtle blur - configurable via initialBlur */
+      -webkit-backdrop-filter: blur(${blurAmount}px);
       border-radius: var(--radius-lg);
       cursor: pointer;
       transition: opacity 0.4s ease;
@@ -7800,9 +7800,9 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
     }
     
     .play-overlay-icon svg {
-        margin-left: 4px; /* Optical center adjustment for play triangle */
-        width: 20px;
-        height: 20px;
+        margin-left: 5px; /* Optical center adjustment for play triangle */
+        width: 26px;
+        height: 26px;
         fill: var(--accent);
     }
 
@@ -7923,7 +7923,7 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
       width: 100%;
       margin: 24px 0;
       padding: 0 0 0 20px;
-      font-size: 13.5px;
+      font-size: 15px;
       font-style: italic;
       color: var(--annotation-text);
       opacity: 0;
@@ -7953,12 +7953,13 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.05em;
-      color: var(--annotation-border);
+      color: var(--annotation-text);
       margin-bottom: 6px;
       font-style: normal;
       display: flex;
       align-items: center;
       gap: 6px;
+      opacity: 0.8;
     }
 
     .annotation-content {
@@ -8057,11 +8058,10 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
       transition: opacity 0.3s, transform 0.3s;
     }
     
-    /* In iframe, add some breathing room safely away from edges */
+    /* In iframe, match standalone appearance */
     body.in-iframe .controls {
       margin-bottom: 0;
-      background: rgba(255, 255, 255, 0.9);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+      /* Keep same shadow as standalone for consistency */
     }
     
     :root[data-theme="dark"] .controls {
@@ -8070,7 +8070,7 @@ function generateCss(theme, hasMultipleScenarios, colors, cornerStyle) {
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     }
     
-    body.in-iframe :root[data-theme="dark"] .controls {
+    :root[data-theme="dark"] body.in-iframe .controls {
         background: rgba(30, 41, 59, 0.9);
     }
 
@@ -9203,7 +9203,7 @@ function generateHtml(demo, options = { outputPath: "" }) {
   const hasMultipleScenarios = demo.scenarios.length > 1;
   const timerStyle = demo.meta.timerStyle ?? "circle";
   const cornerStyle = demo.meta.cornerStyle ?? "rounded";
-  const css = generateCss(theme, hasMultipleScenarios, demo.meta.colors, cornerStyle);
+  const css = generateCss(theme, hasMultipleScenarios, demo.meta.colors, cornerStyle, demo.meta.initialBlur);
   const js = generateJs(demo, timerStyle);
   const titleHtml = demo.meta.articleUrl ? `<a href="${escapeHtml(demo.meta.articleUrl)}" class="demo-title-link">${escapeHtml(demo.meta.title)}</a>` : escapeHtml(demo.meta.title);
   const descriptionHtml = demo.meta.description ? `<p class="demo-description">${parseMarkdownLinks(demo.meta.description)}</p>` : "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "conversation-replay",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Create animated text conversation replays",
   "main": "dist/cli.js",
   "type": "module",