@zjlab-fe/data-hub-ui 0.21.6 → 0.22.0

package/es/components/tip-tap/styles/editor.css.js

@@ -0,0 +1,863 @@
+var style = document.createElement('style');
+style.textContent = `/* TipTap Editor - Modern Rich Text Editor */
+/* CSS Variables for TipTap Editor Theme */
+:root {
+  /* Colors - Indigo Theme */
+  --tip-tap-primary-50: #eef2ff;
+  --tip-tap-primary-100: #e0e7ff;
+  --tip-tap-primary-200: #c7d2fe;
+  --tip-tap-primary-300: #a5b4fc;
+  --tip-tap-primary-400: #818cf8;
+  --tip-tap-primary-500: #6366f1;
+  --tip-tap-primary-600: #4f46e5;
+  --tip-tap-primary-700: #4338ca;
+
+  /* Neutral Colors */
+  --tip-tap-gray-50: #f8fafc;
+  --tip-tap-gray-100: #f1f5f9;
+  --tip-tap-gray-200: #e2e8f0;
+  --tip-tap-gray-300: #cbd5e1;
+  --tip-tap-gray-400: #94a3b8;
+  --tip-tap-gray-500: #64748b;
+  --tip-tap-gray-600: #475569;
+  --tip-tap-gray-700: #334155;
+  --tip-tap-gray-800: #1e293b;
+  --tip-tap-gray-900: #0f172a;
+
+  /* Semantic Colors */
+  --tip-tap-success: #10b981;
+  --tip-tap-warning: #f59e0b;
+  --tip-tap-error: #ef4444;
+  --tip-tap-info: #3b82f6;
+
+  /* Spacing */
+  --tip-tap-space-1: 4px;
+  --tip-tap-space-2: 8px;
+  --tip-tap-space-3: 12px;
+  --tip-tap-space-4: 16px;
+  --tip-tap-space-5: 20px;
+  --tip-tap-space-6: 24px;
+  --tip-tap-space-8: 32px;
+}
+/* Toolbar Styles */
+.tip-tap-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--tip-tap-border-color);
+  background: linear-gradient(to bottom, #fafbfc, #f8f9fa);
+  border-radius: var(--tip-tap-radius) var(--tip-tap-radius) 0 0;
+  flex-wrap: wrap;
+  min-height: 48px;
+}
+.tip-tap-toolbar__group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 4px;
+}
+.tip-tap-toolbar__divider {
+  width: 1px;
+  height: 24px;
+  background: var(--tip-tap-gray-200);
+  margin: 0 6px;
+  flex-shrink: 0;
+}
+/* Toolbar Button */
+.tip-tap-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--tip-tap-radius-sm);
+  background: transparent;
+  color: var(--tip-tap-gray-600);
+  cursor: pointer;
+  transition: all var(--tip-tap-transition);
+  position: relative;
+  font-size: 18px;
+}
+.tip-tap-btn:hover {
+  background: var(--tip-tap-gray-100);
+  color: var(--tip-tap-gray-800);
+}
+.tip-tap-btn:active {
+  transform: scale(0.95);
+}
+.tip-tap-btn--active {
+  background: var(--tip-tap-primary-100);
+  color: var(--tip-tap-primary-600);
+}
+.tip-tap-btn--active:hover {
+  background: var(--tip-tap-primary-200);
+  color: var(--tip-tap-primary-700);
+}
+.tip-tap-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+/* Button with text */
+.tip-tap-btn--text {
+  width: auto;
+  padding: 0 10px;
+  font-size: 13px;
+  font-weight: 500;
+  gap: 6px;
+}
+/* Dropdown Button */
+.tip-tap-dropdown {
+  position: relative;
+}
+.tip-tap-dropdown__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  height: 32px;
+  border: none;
+  border-radius: var(--tip-tap-radius-sm);
+  background: transparent;
+  color: var(--tip-tap-gray-700);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--tip-tap-transition);
+  white-space: nowrap;
+}
+.tip-tap-dropdown__trigger:hover {
+  background: var(--tip-tap-gray-100);
+}
+.tip-tap-dropdown__trigger--active {
+  background: var(--tip-tap-primary-100);
+  color: var(--tip-tap-primary-600);
+}
+.tip-tap-dropdown__arrow {
+  font-size: 12px;
+  transition: transform var(--tip-tap-transition);
+}
+.tip-tap-dropdown--open .tip-tap-dropdown__arrow {
+  transform: rotate(180deg);
+}
+.tip-tap-dropdown__menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 160px;
+  padding: 6px;
+  background: var(--tip-tap-bg);
+  border: 1px solid var(--tip-tap-gray-200);
+  border-radius: var(--tip-tap-radius-sm);
+  box-shadow: var(--tip-tap-shadow-lg);
+  z-index: 100;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-8px);
+  transition: all var(--tip-tap-transition);
+}
+.tip-tap-dropdown--open .tip-tap-dropdown__menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+.tip-tap-dropdown__item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--tip-tap-gray-700);
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+  transition: all var(--tip-tap-transition);
+}
+.tip-tap-dropdown__item:hover {
+  background: var(--tip-tap-gray-100);
+}
+.tip-tap-dropdown__item--active {
+  background: var(--tip-tap-primary-50);
+  color: var(--tip-tap-primary-600);
+}
+.tip-tap-dropdown__item-icon {
+  width: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+}
+/* Color Picker */
+.tip-tap-color-picker {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 4px;
+  padding: 8px;
+  min-width: 200px;
+}
+.tip-tap-color-picker__swatch {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: all var(--tip-tap-transition);
+}
+.tip-tap-color-picker__swatch:hover {
+  transform: scale(1.15);
+  border-color: var(--tip-tap-gray-300);
+}
+.tip-tap-color-picker__swatch--active {
+  border-color: var(--tip-tap-primary-500);
+  box-shadow: 0 0 0 2px var(--tip-tap-primary-200);
+}
+.tip-tap-color-picker__swatch--reset {
+  background: linear-gradient(135deg, #fff 45%, #ef4444 45%, #ef4444 55%, #fff 55%);
+  border: 1px solid var(--tip-tap-gray-300);
+}
+/* Tooltip */
+.tip-tap-tooltip {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 6px 10px;
+  background: var(--tip-tap-gray-800);
+  color: white;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 6px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 150ms;
+  pointer-events: none;
+  z-index: 200;
+}
+.tip-tap-tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: var(--tip-tap-gray-800);
+}
+.tip-tap-btn:hover .tip-tap-tooltip,
+.tip-tap-dropdown__trigger:hover .tip-tap-tooltip {
+  opacity: 1;
+  visibility: visible;
+}
+/* Bubble Menu */
+.tip-tap-bubble-menu {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 8px;
+  background: var(--tip-tap-bg);
+  border: 1px solid var(--tip-tap-gray-200);
+  border-radius: 10px;
+  box-shadow: var(--tip-tap-shadow-lg);
+  animation: tip-tap-menu-in 150ms ease-out;
+}
+.tip-tap-bubble-menu .tip-tap-btn {
+  width: 28px;
+  height: 28px;
+  font-size: 16px;
+}
+.tip-tap-bubble-menu .tip-tap-toolbar__divider {
+  height: 20px;
+  margin: 0 4px;
+}
+/* Floating Menu */
+.tip-tap-floating-menu {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 8px;
+  background: var(--tip-tap-bg);
+  border: 1px solid var(--tip-tap-gray-200);
+  border-radius: 10px;
+  box-shadow: var(--tip-tap-shadow-lg);
+  animation: tip-tap-menu-in 150ms ease-out;
+}
+.tip-tap-floating-menu .tip-tap-btn {
+  width: 28px;
+  height: 28px;
+  font-size: 16px;
+}
+.tip-tap-floating-menu .tip-tap-btn:hover {
+  background: var(--tip-tap-primary-50);
+  color: var(--tip-tap-primary-600);
+}
+/* Link Input Popup */
+.tip-tap-link-popup {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  background: var(--tip-tap-bg);
+  border: 1px solid var(--tip-tap-gray-200);
+  border-radius: 10px;
+  box-shadow: var(--tip-tap-shadow-lg);
+  animation: tip-tap-menu-in 150ms ease-out;
+}
+.tip-tap-link-popup__input {
+  width: 240px;
+  padding: 8px 12px;
+  border: 1px solid var(--tip-tap-gray-300);
+  border-radius: 6px;
+  font-size: 14px;
+  color: var(--tip-tap-gray-800);
+  outline: none;
+  transition: all var(--tip-tap-transition);
+}
+.tip-tap-link-popup__input:focus {
+  border-color: var(--tip-tap-primary-400);
+  box-shadow: 0 0 0 3px var(--tip-tap-primary-100);
+}
+.tip-tap-link-popup__input::-moz-placeholder {
+  color: var(--tip-tap-gray-400);
+}
+.tip-tap-link-popup__input::placeholder {
+  color: var(--tip-tap-gray-400);
+}
+.tip-tap-link-popup__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  background: var(--tip-tap-primary-500);
+  color: white;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--tip-tap-transition);
+}
+.tip-tap-link-popup__btn:hover {
+  background: var(--tip-tap-primary-600);
+}
+.tip-tap-link-popup__btn--secondary {
+  background: var(--tip-tap-gray-100);
+  color: var(--tip-tap-gray-700);
+}
+.tip-tap-link-popup__btn--secondary:hover {
+  background: var(--tip-tap-gray-200);
+}
+.tip-tap-link-popup__btn--danger {
+  background: #fef2f2;
+  color: #dc2626;
+}
+.tip-tap-link-popup__btn--danger:hover {
+  background: #fee2e2;
+}
+/* Table Menu */
+.tip-tap-table-menu {
+  padding: 12px;
+  background: var(--tip-tap-bg);
+  border: 1px solid var(--tip-tap-gray-200);
+  border-radius: 10px;
+  box-shadow: var(--tip-tap-shadow-lg);
+}
+.tip-tap-table-menu__label {
+  font-size: 12px;
+  color: var(--tip-tap-gray-500);
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+.tip-tap-table-menu__grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 3px;
+}
+.tip-tap-table-menu__cell {
+  width: 20px;
+  height: 20px;
+  border: 1px solid var(--tip-tap-gray-300);
+  border-radius: 3px;
+  background: var(--tip-tap-bg);
+  cursor: pointer;
+  transition: all var(--tip-tap-transition);
+}
+.tip-tap-table-menu__cell:hover,
+.tip-tap-table-menu__cell--active {
+  background: var(--tip-tap-primary-100);
+  border-color: var(--tip-tap-primary-400);
+}
+.tip-tap-table-menu__size {
+  text-align: center;
+  font-size: 12px;
+  color: var(--tip-tap-gray-600);
+  margin-top: 8px;
+  font-weight: 500;
+}
+/* Editor Content Area */
+.tip-tap-editor__content {
+  padding: 0;
+}
+.tip-tap-editor__content .tiptap {
+  padding: 20px 24px;
+  min-height: 300px;
+  outline: none;
+  color: var(--tip-tap-gray-800);
+  font-size: 16px;
+  line-height: 1.7;
+}
+/* Placeholder */
+.tip-tap-editor__content .tiptap p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  color: var(--tip-tap-gray-400);
+  pointer-events: none;
+  position: absolute;
+  font-style: italic;
+}
+/* Headings */
+.tip-tap-editor__content .tiptap h1,
+.tip-tap-reader__content .tiptap h1 {
+  font-size: 2em;
+  font-weight: 700;
+  line-height: 1.3;
+  margin: 1em 0 0.5em;
+  color: var(--tip-tap-gray-900);
+}
+.tip-tap-editor__content .tiptap h2,
+.tip-tap-reader__content .tiptap h2 {
+  font-size: 1.5em;
+  font-weight: 600;
+  line-height: 1.35;
+  margin: 0.9em 0 0.45em;
+  color: var(--tip-tap-gray-900);
+}
+.tip-tap-editor__content .tiptap h3,
+.tip-tap-reader__content .tiptap h3 {
+  font-size: 1.25em;
+  font-weight: 600;
+  line-height: 1.4;
+  margin: 0.8em 0 0.4em;
+  color: var(--tip-tap-gray-900);
+}
+.tip-tap-editor__content .tiptap h4,
+.tip-tap-reader__content .tiptap h4 {
+  font-size: 1.1em;
+  font-weight: 600;
+  line-height: 1.4;
+  margin: 0.7em 0 0.35em;
+  color: var(--tip-tap-gray-900);
+}
+/* Paragraphs */
+.tip-tap-editor__content .tiptap p,
+.tip-tap-reader__content .tiptap p {
+  margin: 0 0 0.75em;
+}
+/* Links */
+.tip-tap-editor__content .tiptap a,
+.tip-tap-reader__content .tiptap a {
+  color: var(--tip-tap-primary-500);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  transition: color var(--tip-tap-transition);
+}
+.tip-tap-editor__content .tiptap a:hover,
+.tip-tap-reader__content .tiptap a:hover {
+  color: var(--tip-tap-primary-700);
+}
+/* Lists */
+.tip-tap-editor__content .tiptap ul,
+.tip-tap-reader__content .tiptap ul {
+  list-style-type: disc;
+  padding-left: 1.5em;
+  margin: 0.75em 0;
+}
+.tip-tap-editor__content .tiptap ol,
+.tip-tap-reader__content .tiptap ol {
+  list-style-type: decimal;
+  padding-left: 1.5em;
+  margin: 0.75em 0;
+}
+.tip-tap-editor__content .tiptap li,
+.tip-tap-reader__content .tiptap li {
+  margin: 0.25em 0;
+}
+.tip-tap-editor__content .tiptap li p,
+.tip-tap-reader__content .tiptap li p {
+  margin: 0;
+}
+/* Blockquote */
+.tip-tap-editor__content .tiptap blockquote,
+.tip-tap-reader__content .tiptap blockquote {
+  border-left: 4px solid var(--tip-tap-primary-300);
+  padding: 12px 20px;
+  margin: 1em 0;
+  background: var(--tip-tap-primary-50);
+  border-radius: 0 8px 8px 0;
+  color: var(--tip-tap-gray-700);
+  font-style: italic;
+}
+.tip-tap-editor__content .tiptap blockquote p,
+.tip-tap-reader__content .tiptap blockquote p {
+  margin: 0;
+}
+/* Code - Inline */
+.tip-tap-editor__content .tiptap code,
+.tip-tap-reader__content .tiptap code {
+  background: #f1f5f9;
+  color: #e11d48;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 0.9em;
+}
+/* Code Block */
+.tip-tap-editor__content .tiptap pre,
+.tip-tap-reader__content .tiptap pre {
+  background: #1e293b;
+  color: #e2e8f0;
+  padding: 16px 20px;
+  border-radius: 10px;
+  margin: 1em 0;
+  overflow-x: auto;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 14px;
+  line-height: 1.6;
+}
+.tip-tap-editor__content .tiptap pre code,
+.tip-tap-reader__content .tiptap pre code {
+  background: none;
+  color: inherit;
+  padding: 0;
+  font-size: inherit;
+}
+/* Syntax Highlighting */
+.tip-tap-editor__content .tiptap pre .hljs-comment,
+.tip-tap-reader__content .tiptap pre .hljs-comment {
+  color: #64748b;
+}
+.tip-tap-editor__content .tiptap pre .hljs-keyword,
+.tip-tap-reader__content .tiptap pre .hljs-keyword {
+  color: #c084fc;
+}
+.tip-tap-editor__content .tiptap pre .hljs-string,
+.tip-tap-reader__content .tiptap pre .hljs-string {
+  color: #4ade80;
+}
+.tip-tap-editor__content .tiptap pre .hljs-number,
+.tip-tap-reader__content .tiptap pre .hljs-number {
+  color: #fb923c;
+}
+.tip-tap-editor__content .tiptap pre .hljs-function,
+.tip-tap-reader__content .tiptap pre .hljs-function {
+  color: #60a5fa;
+}
+/* Horizontal Rule */
+.tip-tap-editor__content .tiptap hr,
+.tip-tap-reader__content .tiptap hr {
+  border: none;
+  height: 2px;
+  background: linear-gradient(to right, transparent, var(--tip-tap-gray-300), transparent);
+  margin: 2em 0;
+}
+/* Images */
+.tip-tap-editor__content .tiptap img,
+.tip-tap-reader__content .tiptap img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  margin: 1em 0;
+}
+.tip-tap-editor__content .tiptap img.ProseMirror-selectednode {
+  outline: 3px solid var(--tip-tap-primary-400);
+  outline-offset: 2px;
+}
+/* Table Wrapper - for horizontal scroll on overflow */
+.tip-tap-editor__content .tiptap .tableWrapper,
+.tip-tap-reader__content .tiptap .tableWrapper {
+  overflow-x: auto;
+  margin: 1em 0;
+  border-radius: 8px;
+  border: 1px solid var(--tip-tap-gray-200);
+}
+/* Tables */
+.tip-tap-editor__content .tiptap table,
+.tip-tap-reader__content .tiptap table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0;
+  border-radius: 8px;
+  overflow: hidden;
+  border: none;
+}
+/* Hide colgroup to prevent inline width styles from affecting layout */
+.tip-tap-editor__content .tiptap table colgroup,
+.tip-tap-reader__content .tiptap table colgroup {
+  display: none;
+}
+.tip-tap-editor__content .tiptap th,
+.tip-tap-reader__content .tiptap th {
+  background: var(--tip-tap-gray-100);
+  font-weight: 600;
+  text-align: left;
+  padding: 12px 16px;
+  border: 1px solid var(--tip-tap-gray-200);
+  min-width: 150px;
+  max-width: 500px;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+.tip-tap-editor__content .tiptap td,
+.tip-tap-reader__content .tiptap td {
+  padding: 10px 16px;
+  border: 1px solid var(--tip-tap-gray-200);
+  min-width: 150px;
+  max-width: 500px;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+.tip-tap-editor__content .tiptap .selectedCell {
+  background: var(--tip-tap-primary-50);
+}
+/* Task List */
+.tip-tap-editor__content .tiptap ul[data-type='taskList'],
+.tip-tap-reader__content .tiptap ul[data-type='taskList'] {
+  list-style: none;
+  padding-left: 0;
+}
+.tip-tap-editor__content .tiptap ul[data-type='taskList'] li,
+.tip-tap-reader__content .tiptap ul[data-type='taskList'] li {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+.tip-tap-editor__content .tiptap ul[data-type='taskList'] input[type='checkbox'],
+.tip-tap-reader__content .tiptap ul[data-type='taskList'] input[type='checkbox'] {
+  margin-top: 4px;
+  accent-color: var(--tip-tap-primary-500);
+}
+/* Highlight */
+.tip-tap-editor__content .tiptap mark,
+.tip-tap-reader__content .tiptap mark {
+  background: #fef08a;
+  padding: 1px 2px;
+  border-radius: 2px;
+}
+/* Text Selection */
+.tip-tap-editor__content .tiptap ::-moz-selection {
+  background: var(--tip-tap-primary-200);
+}
+.tip-tap-editor__content .tiptap ::selection {
+  background: var(--tip-tap-primary-200);
+}
+/* Text alignment classes */
+.tip-tap-editor__content .tiptap .text-left,
+.tip-tap-reader__content .tiptap .text-left {
+  text-align: left;
+}
+.tip-tap-editor__content .tiptap .text-center,
+.tip-tap-reader__content .tiptap .text-center {
+  text-align: center;
+}
+.tip-tap-editor__content .tiptap .text-right,
+.tip-tap-reader__content .tiptap .text-right {
+  text-align: right;
+}
+.tip-tap-editor__content .tiptap .text-justify,
+.tip-tap-reader__content .tiptap .text-justify {
+  text-align: justify;
+}
+/* First child margin reset */
+.tip-tap-editor__content .tiptap > *:first-child,
+.tip-tap-reader__content .tiptap > *:first-child {
+  margin-top: 0;
+}
+/* Last child margin reset */
+.tip-tap-editor__content .tiptap > *:last-child,
+.tip-tap-reader__content .tiptap > *:last-child {
+  margin-bottom: 0;
+}
+/* Animations for TipTap Editor */
+/* Menu entrance animation */
+@keyframes tip-tap-menu-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+/* Button press animation */
+@keyframes tip-tap-btn-press {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.92);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+/* Fade in */
+@keyframes tip-tap-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+/* Slide up */
+@keyframes tip-tap-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+/* Slide down */
+@keyframes tip-tap-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+/* Pulse animation for active states */
+@keyframes tip-tap-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 var(--tip-tap-primary-200);
+  }
+  50% {
+    box-shadow: 0 0 0 4px var(--tip-tap-primary-100);
+  }
+}
+/* Shimmer effect for loading states */
+@keyframes tip-tap-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+/* Highlight flash animation */
+@keyframes tip-tap-highlight-flash {
+  0% {
+    background: var(--tip-tap-primary-200);
+  }
+  100% {
+    background: transparent;
+  }
+}
+/* Scale in from center */
+@keyframes tip-tap-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+/* Bounce animation */
+@keyframes tip-tap-bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+}
+/* Spin animation for loading */
+@keyframes tip-tap-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* Base Container */
+.tip-tap-editor {
+  --tip-tap-border-color: #e2e8f0;
+  --tip-tap-bg: #ffffff;
+  --tip-tap-text: #1e293b;
+  --tip-tap-text-muted: #64748b;
+  --tip-tap-primary: #6366f1;
+  --tip-tap-primary-light: #818cf8;
+  --tip-tap-primary-bg: #eef2ff;
+  --tip-tap-radius: 12px;
+  --tip-tap-radius-sm: 8px;
+  --tip-tap-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tip-tap-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tip-tap-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  position: relative;
+  background: var(--tip-tap-bg);
+  border: 2px solid var(--tip-tap-border-color);
+  border-radius: var(--tip-tap-radius);
+  transition:
+    border-color var(--tip-tap-transition),
+    box-shadow var(--tip-tap-transition);
+  font-family:
+    'Geist',
+    'Inter',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+}
+.tip-tap-editor--focused {
+  border-color: var(--tip-tap-primary);
+  box-shadow: 0 0 0 3px var(--tip-tap-primary-bg);
+}
+/* Reader Mode */
+.tip-tap-reader {
+  overflow-x: auto;
+  font-family:
+    'Geist',
+    'Inter',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+}
+.tip-tap-reader__content .tiptap {
+  padding: 0;
+  outline: none;
+  font-size: 16px;
+}
+/* Scrollbar Styling */
+.tip-tap-editor__content .tiptap::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.tip-tap-editor__content .tiptap::-webkit-scrollbar-track {
+  background: transparent;
+}
+.tip-tap-editor__content .tiptap::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+.tip-tap-editor__content .tiptap::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+`;
+document.head.appendChild(style);