dynim-core 1.0.0

package/src/styles/builder.css

@@ -0,0 +1,422 @@
+/**
+ * Builder Mode Styles
+ * Floating pill bar (Cluely-style) for builder mode
+ */
+
+/* ===========================================
+   BUILDER CONTAINER
+   =========================================== */
+
+.builder {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* ===========================================
+   TOP BAR - Floating Pill Style
+   =========================================== */
+
+.builder-bar {
+  position: fixed;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%) translateY(-20px);
+  height: 44px;
+  background: rgba(0, 0, 0, 0.08);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 8px 0 24px;
+  z-index: 10005 !important;
+  border-radius: 22px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
+
+  /* Animation - hidden by default */
+  opacity: 0;
+  pointer-events: none;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.builder--active .builder-bar {
+  transform: translateX(-50%) translateY(0);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Logo/status section */
+.builder-bar__logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #ffffff;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.builder-bar__icon {
+  color: #3b82f6;
+  width: 16px;
+  height: 16px;
+}
+
+/* Divider */
+.builder-bar__divider {
+  width: 1px;
+  height: 20px;
+  background: rgba(255, 255, 255, 0.15);
+  margin: 0 4px;
+}
+
+/* Actions section */
+.builder-bar__actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Buttons */
+.builder-bar__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px 16px;
+  border: none;
+  border-radius: 16px;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  pointer-events: auto;
+  position: relative;
+  z-index: 1;
+}
+
+.builder-bar__btn--save {
+  background: #3b82f6;
+  color: #ffffff;
+}
+
+.builder-bar__btn--save:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.builder-bar__btn--save:active:not(:disabled) {
+  transform: scale(0.96);
+}
+
+.builder-bar__btn--saved {
+  background: #22c55e !important;
+}
+
+.builder-bar__btn--preview {
+  background: rgba(255, 255, 255, 0.08);
+  color: #94a3b8;
+}
+
+.builder-bar__btn--preview:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #ffffff;
+}
+
+.builder-bar__btn--preview:active {
+  transform: scale(0.96);
+}
+
+.builder-bar__btn--exit {
+  background: rgba(255, 255, 255, 0.08);
+  color: #94a3b8;
+}
+
+.builder-bar__btn--exit:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #ffffff;
+}
+
+.builder-bar__btn--exit:active {
+  transform: scale(0.96);
+}
+
+/* Undo button - contextual appearance */
+.builder-bar__btn--undo {
+  padding: 6px 10px;
+  background: rgba(255, 255, 255, 0.08);
+  color: #94a3b8;
+  animation: undoSlideIn 0.2s ease-out;
+}
+
+.builder-bar__btn--undo:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #ffffff;
+}
+
+@keyframes undoSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Disabled state for all buttons */
+.builder-bar__btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.builder-bar__btn.builder-bar__btn--save:disabled {
+  background: rgba(100, 116, 139, 0.5) !important;
+  color: rgba(255, 255, 255, 0.4) !important;
+  opacity: 1 !important;
+}
+
+/* ===========================================
+   UNSAVED CHANGES MODAL
+   =========================================== */
+
+.builder-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 10010 !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+}
+
+.builder-modal__backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+.builder-modal__dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #1e293b;
+  border-radius: 16px;
+  padding: 24px;
+  min-width: 320px;
+  max-width: 400px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  z-index: 10011;
+  pointer-events: auto;
+}
+
+.builder-modal__title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 8px;
+}
+
+.builder-modal__message {
+  font-size: 14px;
+  color: #94a3b8;
+  margin-bottom: 24px;
+  line-height: 1.5;
+}
+
+.builder-modal__actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.builder-modal__btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.builder-modal__btn--cancel {
+  background: rgba(255, 255, 255, 0.08);
+  color: #94a3b8;
+}
+
+.builder-modal__btn--cancel:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #ffffff;
+}
+
+.builder-modal__btn--discard {
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+}
+
+.builder-modal__btn--discard:hover {
+  background: rgba(239, 68, 68, 0.25);
+}
+
+.builder-modal__btn--save {
+  background: #3b82f6;
+  color: #ffffff;
+}
+
+.builder-modal__btn--save:hover {
+  background: #2563eb;
+}
+
+/* ===========================================
+   RESPONSIVE
+   =========================================== */
+
+/* ===========================================
+   EDITOR OVERLAYS - Dark Reader Protection
+   Uses !important to prevent browser extensions
+   from overriding these critical visual styles
+   =========================================== */
+
+#__editor-overlays__ {
+  position: fixed !important;
+  inset: 0 !important;
+  pointer-events: none !important;
+  z-index: 10000 !important;
+}
+
+/* Hover overlay - blue */
+.editor-hover-overlay.active {
+  position: fixed !important;
+  border: 2px solid #0ea5e9 !important;
+  background: rgba(14, 165, 233, 0.1) !important;
+  pointer-events: none !important;
+  z-index: 10000 !important;
+  box-sizing: border-box !important;
+}
+
+/* Selection overlay - purple */
+.editor-selection-overlay.active {
+  position: fixed !important;
+  border: 2px solid #8b5cf6 !important;
+  background: rgba(139, 92, 246, 0.1) !important;
+  pointer-events: none !important;
+  z-index: 9999 !important;
+  box-sizing: border-box !important;
+}
+
+/* Drag ghost - purple dashed */
+.editor-drag-ghost.active {
+  position: fixed !important;
+  border: 2px dashed #8b5cf6 !important;
+  background: rgba(139, 92, 246, 0.1) !important;
+  border-radius: 4px !important;
+  pointer-events: none !important;
+  z-index: 10004 !important;
+  box-sizing: border-box !important;
+  opacity: 0.8 !important;
+}
+
+/* Drop target highlight - subtle green fill */
+.editor-drop-target.active {
+  position: fixed !important;
+  background: rgba(34, 197, 94, 0.1) !important;
+  border-radius: 3px !important;
+  pointer-events: none !important;
+  z-index: 10001 !important;
+  box-sizing: border-box !important;
+}
+
+/* Drop line - green indicator */
+.editor-drop-line.active {
+  position: fixed !important;
+  background: #22c55e !important;
+  border-radius: 2px !important;
+  pointer-events: none !important;
+  z-index: 10002 !important;
+  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5) !important;
+}
+
+/* Tooltip */
+.editor-tooltip.active {
+  position: fixed !important;
+  background: #1e1e1e !important;
+  color: #fff !important;
+  padding: 4px 8px !important;
+  border-radius: 4px !important;
+  font-size: 11px !important;
+  font-family: 'SF Mono', Monaco, 'Courier New', monospace !important;
+  white-space: nowrap !important;
+  pointer-events: none !important;
+  z-index: 10001 !important;
+  max-width: 400px !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
+}
+
+/* Parent highlight */
+.editor-parent-highlight.active {
+  position: fixed !important;
+  pointer-events: none !important;
+  z-index: 10000 !important;
+  box-sizing: border-box !important;
+}
+
+/* ===========================================
+   RESPONSIVE
+   =========================================== */
+
+@media (max-width: 480px) {
+  .builder-bar {
+    top: 8px;
+    height: 40px;
+    padding: 0 4px 0 12px;
+    border-radius: 20px;
+  }
+
+  .builder-bar__logo span {
+    display: none;
+  }
+
+  .builder-bar__btn {
+    padding: 5px 10px;
+    font-size: 12px;
+    border-radius: 14px;
+  }
+
+  .builder-bar__btn svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .builder-modal__dialog {
+    min-width: auto;
+    margin: 16px;
+    padding: 20px;
+  }
+
+  .builder-modal__actions {
+    flex-direction: column;
+  }
+
+  .builder-modal__btn {
+    width: 100%;
+    padding: 12px 16px;
+  }
+}

package/src/styles/editor.css

@@ -0,0 +1,131 @@
+/**
+ * Editor styles - Visual overlays for the drag-and-drop editor
+ * Matches the original drag&drop folder styling
+ */
+
+:root {
+  --editor-accent-blue: #0ea5e9;
+  --editor-accent-purple: #8b5cf6;
+  --editor-accent-green: #22c55e;
+}
+
+/* Freeze overlay - captures events but allows scroll */
+#__editor-freeze-overlay__,
+.editor-freeze-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  background: transparent;
+  cursor: default;
+}
+
+/* Overlay container */
+#__editor-overlays__ {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 10000;
+}
+
+/* Hover overlay - blue with fill (like original) */
+.editor-hover-overlay {
+  position: fixed;
+  border: 2px solid var(--editor-accent-blue);
+  background: rgba(14, 165, 233, 0.1);
+  pointer-events: none;
+  z-index: 10000;
+  box-sizing: border-box;
+}
+
+/* Selection overlay - purple with fill (like original) */
+.editor-selection-overlay {
+  position: fixed;
+  border: 2px solid var(--editor-accent-purple);
+  background: rgba(139, 92, 246, 0.1);
+  pointer-events: none;
+  z-index: 9999;
+  box-sizing: border-box;
+}
+
+/* Drag ghost - purple dashed */
+.editor-drag-ghost {
+  position: fixed;
+  border: 2px dashed var(--editor-accent-purple);
+  background: rgba(139, 92, 246, 0.1);
+  border-radius: 4px;
+  pointer-events: none;
+  z-index: 10004;
+  box-sizing: border-box;
+  opacity: 0.8;
+}
+
+/* Drop target highlight - green tint */
+.editor-drop-target {
+  position: fixed;
+  background: rgba(34, 197, 94, 0.1);
+  border-radius: 3px;
+  pointer-events: none;
+  z-index: 10001;
+  box-sizing: border-box;
+}
+
+/* Parent highlight - disabled, not used in original */
+.editor-parent-highlight {
+  display: none !important;
+}
+
+/* Drop indicator line - green */
+.editor-drop-line {
+  position: fixed;
+  background: var(--editor-accent-green);
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 10002;
+  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
+}
+
+/* No-drop indicator - red dashed border for invalid drop zones */
+.editor-no-drop-indicator {
+  position: fixed;
+  border: 2px dashed #ef4444;
+  background: rgba(239, 68, 68, 0.1);
+  border-radius: 4px;
+  pointer-events: none;
+  z-index: 10003;
+  box-sizing: border-box;
+}
+
+/* Tooltip - selector info */
+.editor-tooltip {
+  position: fixed;
+  background: #1e1e1e;
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 10001;
+  max-width: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}
+
+/* Cursor states */
+.editor-freeze-overlay[data-dragging="true"] {
+  cursor: grabbing !important;
+}
+
+/* Wrappers created by drag-and-drop (minimal styling) */
+[data-dnd-wrapper] {
+  /* No visual styling - just structural */
+}
+
+/* Builder mode active state */
+body.builder-mode-active {
+  /* Prevent selection during builder mode */
+  user-select: none;
+  -webkit-user-select: none;
+}

package/src/styles/themes/dark.css

@@ -0,0 +1,24 @@
+/**
+ * Dark theme
+ */
+
+.chatbot--dark {
+  --chat-bg: #1f2937;
+  --chat-border: #374151;
+  --chat-text: #f9fafb;
+  --chat-text-muted: #9ca3af;
+
+  --message-user-bg: #3b82f6;
+  --message-user-text: #ffffff;
+  --message-bot-bg: #374151;
+  --message-bot-text: #f9fafb;
+
+  --input-bg: #111827;
+  --input-border: #374151;
+  --input-focus: #60a5fa;
+
+  --button-bg: #3b82f6;
+  --button-hover: #60a5fa;
+
+  --chat-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+}

package/src/styles/themes/light.css

@@ -0,0 +1,21 @@
+/**
+ * Light theme (default)
+ */
+
+.chatbot--light {
+  --chat-bg: #ffffff;
+  --chat-border: #e5e7eb;
+  --chat-text: #1f2937;
+  --chat-text-muted: #6b7280;
+
+  --message-user-bg: #3b82f6;
+  --message-user-text: #ffffff;
+  --message-bot-bg: #f3f4f6;
+  --message-bot-text: #1f2937;
+
+  --input-bg: #f9fafb;
+  --input-border: #e5e7eb;
+
+  --button-bg: #3b82f6;
+  --button-hover: #2563eb;
+}

package/src/styles/variables.css

@@ -0,0 +1,63 @@
+/**
+ * CSS Custom Properties for theming
+ * Override these to customize the chatbot appearance
+ */
+
+.chatbot {
+  /* Container */
+  --chat-width: 380px;
+  --chat-height: 520px;
+  --chat-radius: 16px;
+  --chat-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
+
+  /* Floating launcher */
+  --launcher-size: 56px;
+  --launcher-bg: #3b82f6;
+  --launcher-hover: #2563eb;
+  --launcher-text: #ffffff;
+  --launcher-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+
+  /* Floating position offset */
+  --chat-offset: 20px;
+
+  /* Colors */
+  --chat-bg: #ffffff;
+  --chat-border: #e5e7eb;
+  --chat-text: #1f2937;
+  --chat-text-muted: #6b7280;
+
+  /* Header */
+  --header-bg: #3b82f6;
+  --header-text: #ffffff;
+  --header-height: 56px;
+
+  /* Messages */
+  --message-user-bg: #3b82f6;
+  --message-user-text: #ffffff;
+  --message-bot-bg: #f3f4f6;
+  --message-bot-text: #1f2937;
+  --message-radius: 12px;
+  --message-padding: 12px 16px;
+  --message-gap: 8px;
+
+  /* Input */
+  --input-bg: #f9fafb;
+  --input-border: #e5e7eb;
+  --input-focus: #3b82f6;
+  --input-radius: 24px;
+  --input-height: 48px;
+
+  /* Button */
+  --button-bg: #3b82f6;
+  --button-hover: #2563eb;
+  --button-text: #ffffff;
+
+  /* Typography */
+  --chat-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --chat-font-size: 14px;
+  --chat-line-height: 1.5;
+
+  /* Animation */
+  --chat-transition: 0.2s ease;
+  --popup-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}