@deepcitation/deepcitation-js 1.0.1

package/src/react/styles.css

@@ -0,0 +1,768 @@
+/**
+ * DeepCitation React Component Styles
+ * CSS-only implementation for citation display and popover
+ */
+
+/* Base citation container */
+.dc-citation {
+  position: relative;
+  display: inline-flex;
+  align-items: baseline;
+  cursor: pointer;
+  padding: 0.0625rem 0.125rem;
+  margin: -0.0625rem -0.125rem;
+  border-radius: 0.125rem;
+  transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out;
+}
+
+/* After first click (pinned), show zoom-in cursor to indicate next click expands image */
+.dc-citation[data-tooltip-expanded="true"][data-has-image="true"] {
+  cursor: zoom-in;
+}
+
+.dc-citation:hover {
+  background-color: var(--dc-hover-bg, rgba(59, 130, 246, 0.08));
+}
+
+.dc-citation:active {
+  background-color: var(--dc-active-bg, rgba(59, 130, 246, 0.12));
+}
+
+/* Citation bracket wrapper */
+.dc-citation-bracket {
+  display: inline-flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 0.125rem;
+  white-space: nowrap;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 0.75rem;
+  line-height: 1.25;
+  color: var(--dc-text-secondary, #64748b);
+  transition: color 0.15s ease-out, transform 0.1s ease-out;
+}
+
+.dc-citation:hover .dc-citation-bracket {
+  color: var(--dc-text-primary, #334155);
+}
+
+.dc-citation:active .dc-citation-bracket {
+  transform: scale(0.98);
+}
+
+/* Citation number/text */
+.dc-citation-text {
+  max-width: 20rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Status-specific styles */
+.dc-citation--verified .dc-citation-text {
+  color: var(--dc-color-verified, #2563eb);
+}
+
+.dc-citation--verified:hover {
+  background-color: var(--dc-verified-hover-bg, rgba(37, 99, 235, 0.08));
+}
+
+.dc-citation--verified:hover .dc-citation-text {
+  text-decoration: underline;
+  color: var(--dc-color-verified-hover, #1d4ed8);
+}
+
+.dc-citation--miss {
+  opacity: 0.7;
+}
+
+.dc-citation--miss .dc-citation-text {
+  text-decoration: line-through;
+  color: var(--dc-text-tertiary, #94a3b8);
+}
+
+.dc-citation--miss:hover {
+  background-color: var(--dc-miss-hover-bg, rgba(148, 163, 184, 0.1));
+  opacity: 1;
+}
+
+/* NOTE: Partial matches use the same text styling as verified (blue)
+   because they WERE found in the document - they just don't match exactly.
+   The indicator shows the match quality (orange for partial). */
+
+.dc-citation--pending .dc-citation-text {
+  animation: dc-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.dc-citation--pending:hover {
+  background-color: var(--dc-pending-hover-bg, rgba(100, 116, 139, 0.08));
+}
+
+@keyframes dc-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Status indicators */
+.dc-indicator {
+  display: inline-flex;
+  position: relative;
+  margin-left: 0.125rem;
+}
+
+.dc-indicator--verified {
+  color: var(--dc-color-success, #16a34a);
+  top: 0.25rem;
+}
+
+.dc-indicator--partial {
+  color: var(--dc-color-error, #dc2626);
+  top: 0.25rem;
+}
+
+/* Popover container - CSS only */
+.dc-popover-wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.dc-popover {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-0.5rem);
+  z-index: 50;
+
+  display: none;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  padding: 0.5rem;
+
+  background: var(--dc-popover-bg, #ffffff);
+  border: 1px solid var(--dc-border-color, #e2e8f0);
+  border-radius: 0.375rem;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease-out;
+}
+
+/* Arrow for popover */
+.dc-popover::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 0.375rem solid transparent;
+  border-top-color: var(--dc-popover-bg, #ffffff);
+}
+
+.dc-popover::before {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 0.4375rem solid transparent;
+  border-top-color: var(--dc-border-color, #e2e8f0);
+}
+
+/* Invisible bridge to prevent tooltip from disappearing when moving mouse to it */
+.dc-popover-wrapper::before {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: -1rem;
+  right: -1rem;
+  height: 1.5rem; /* Bridge height to connect to popover */
+  background: transparent;
+  pointer-events: none;
+}
+
+.dc-popover-wrapper:hover::before,
+.dc-popover-wrapper[data-expanded="true"]::before {
+  pointer-events: auto;
+}
+
+/* Show popover on hover or when expanded via click */
+.dc-popover-wrapper:hover .dc-popover,
+.dc-popover-wrapper:focus-within .dc-popover,
+.dc-popover-wrapper[data-expanded="true"] .dc-popover {
+  display: flex;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Popover positioned below */
+.dc-popover--bottom {
+  bottom: auto;
+  top: 100%;
+  transform: translateX(-50%) translateY(0.5rem);
+}
+
+.dc-popover--bottom::after {
+  top: auto;
+  bottom: 100%;
+  border-top-color: transparent;
+  border-bottom-color: var(--dc-popover-bg, #ffffff);
+}
+
+.dc-popover--bottom::before {
+  top: auto;
+  bottom: 100%;
+  border-top-color: transparent;
+  border-bottom-color: var(--dc-border-color, #e2e8f0);
+}
+
+/* Image-only popover (no padding, natural size) */
+.dc-popover:has(.dc-popover-image-button:only-child) {
+  padding: 0;
+  min-width: auto;
+  max-width: none;
+}
+
+.dc-popover:has(.dc-popover-image-button:only-child) .dc-popover-image {
+  border-radius: 0.375rem;
+}
+
+
+/* Verification image in popover - preserve aspect ratio */
+.dc-popover-image {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 700px;
+  max-height: 500px;
+  object-fit: contain;
+  border-radius: 0.375rem;
+  background: var(--dc-image-bg, #f8fafc);
+  user-select: none;
+  -webkit-user-drag: none;
+  cursor: zoom-in;
+}
+
+.dc-popover-image-button {
+  cursor: zoom-in;
+}
+
+
+@keyframes dc-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* ========================================
+   Full-size Image Overlay
+   ======================================== */
+
+.dc-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(4px);
+  animation: dc-fade-in 0.15s ease-out;
+}
+
+.dc-overlay-content {
+  position: relative;
+  max-width: 95vw;
+  max-height: 95vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: zoom-out;
+}
+
+.dc-overlay-image {
+  max-width: 100%;
+  max-height: 95vh;
+  object-fit: contain;
+  border-radius: 0.5rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+/* Status tooltip for miss/partial explanations */
+.dc-status-tooltip {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-0.5rem);
+  z-index: 50;
+
+  display: none;
+  flex-direction: column;
+  gap: 0.375rem;
+
+  padding: 0.625rem 0.75rem;
+  min-width: 18rem;
+  max-width: 28rem;
+
+  background: var(--dc-popover-bg, #ffffff);
+  border: 1px solid var(--dc-border-color, #e2e8f0);
+  border-radius: 0.375rem;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease-out;
+
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  text-align: left;
+}
+
+/* Arrow for status tooltip */
+.dc-status-tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 0.375rem solid transparent;
+  border-top-color: var(--dc-popover-bg, #ffffff);
+}
+
+.dc-status-tooltip::before {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 0.4375rem solid transparent;
+  border-top-color: var(--dc-border-color, #e2e8f0);
+}
+
+/* Show status tooltip on hover or when expanded via click */
+.dc-popover-wrapper:hover .dc-status-tooltip,
+.dc-popover-wrapper:focus-within .dc-status-tooltip,
+.dc-popover-wrapper[data-expanded="true"] .dc-status-tooltip {
+  display: flex;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Status tooltip header */
+.dc-status-header {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-weight: 600;
+  color: var(--dc-text-primary, #334155);
+}
+
+.dc-status-header--miss {
+  color: var(--dc-color-warning, #d97706);
+}
+
+.dc-status-header--partial {
+  color: var(--dc-color-error, #dc2626);
+}
+
+/* Status icon */
+.dc-status-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+/* Status description */
+.dc-status-description {
+  color: var(--dc-text-secondary, #64748b);
+  font-size: 0.6875rem;
+}
+
+/* Expected/Searched text block */
+.dc-status-searched {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+  padding-top: 0.375rem;
+  border-top: 1px solid var(--dc-border-color, #e2e8f0);
+}
+
+.dc-status-label {
+  font-size: 0.625rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  color: var(--dc-text-tertiary, #94a3b8);
+}
+
+.dc-status-text {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 0.6875rem;
+  padding: 0.375rem 0.5rem;
+  background: var(--dc-code-bg, #f1f5f9);
+  border-radius: 0.25rem;
+  color: var(--dc-text-primary, #334155);
+  word-break: break-word;
+  max-height: 4rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .dc-status-tooltip {
+    --dc-popover-bg: #1e293b;
+    --dc-border-color: #334155;
+    --dc-text-primary: #e2e8f0;
+    --dc-text-secondary: #94a3b8;
+    --dc-text-tertiary: #64748b;
+    --dc-code-bg: #0f172a;
+    --dc-color-warning: #fbbf24;
+    --dc-color-error: #f87171;
+  }
+}
+
+/* ========================================
+   Search Phrases Section (simplified)
+   ======================================== */
+
+.dc-search-phrases {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  margin-top: 0.375rem;
+}
+
+.dc-search-phrases-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dc-search-phrases-toggle {
+  background: none;
+  border: none;
+  color: var(--dc-text-tertiary, #94a3b8);
+  font-size: 0.625rem;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  padding: 0;
+}
+
+.dc-search-phrases-toggle:hover {
+  color: var(--dc-text-secondary, #64748b);
+}
+
+.dc-search-phrases-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  max-height: 10rem;
+  overflow-y: auto;
+}
+
+.dc-search-phrase-item {
+  padding: 0.375rem 0.5rem;
+  border-left: 3px solid var(--dc-color-error, #dc2626);
+  background: var(--dc-code-bg, #f1f5f9);
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 0.6875rem;
+  line-height: 1.4;
+  color: var(--dc-text-primary, #334155);
+  word-break: break-word;
+}
+
+.dc-search-phrase-more {
+  font-size: 0.625rem;
+  color: var(--dc-text-tertiary, #94a3b8);
+  padding-left: 0.5rem;
+}
+
+/* Dark mode support for search phrases */
+@media (prefers-color-scheme: dark) {
+  .dc-search-phrase-item {
+    --dc-code-bg: #0f172a;
+    --dc-text-primary: #e2e8f0;
+    --dc-color-error: #f87171;
+  }
+}
+
+/* ========================================
+   Diff Display Styles
+   ======================================== */
+
+.dc-diff-display {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.dc-diff-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  color: var(--dc-text-secondary, #64748b);
+}
+
+.dc-diff-content {
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+
+.dc-diff-blocks {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.dc-diff-block {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.dc-diff-block--added {
+  background-color: var(--dc-diff-added-bg, rgba(16, 185, 129, 0.08));
+  padding: 0 0.25rem;
+  border-radius: 0.125rem;
+}
+
+.dc-diff-block-added {
+  background-color: var(--dc-diff-added-bg, rgba(16, 185, 129, 0.05));
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.125rem;
+}
+
+.dc-diff-part {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+.dc-diff-part--removed {
+  text-decoration: line-through;
+  text-decoration-thickness: 2px;
+  text-decoration-color: var(--dc-diff-removed-color, rgba(239, 68, 68, 0.5));
+  opacity: 0.6;
+  color: var(--dc-diff-removed-text, #ef4444);
+  margin: 0 0.125rem;
+}
+
+.dc-diff-part--removed:hover {
+  opacity: 1;
+  text-decoration: none;
+}
+
+.dc-diff-part--added {
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  background-color: var(--dc-diff-added-highlight, rgba(16, 185, 129, 0.1));
+  color: var(--dc-text-primary, #334155);
+  margin: 0 0.125rem;
+  padding: 0 0.125rem;
+  border-radius: 0.0625rem;
+}
+
+.dc-diff-part--unchanged {
+  opacity: 0.9;
+  color: var(--dc-text-primary, #334155);
+}
+
+/* ========================================
+   Verification Tabs Styles
+   ======================================== */
+
+.dc-verification-tabs {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.dc-verification-tabs--exact {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.dc-verification-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  padding: 0 1rem;
+  color: var(--dc-text-secondary, #64748b);
+}
+
+.dc-tabs-container {
+  padding: 0.5rem 1rem 0.75rem;
+}
+
+.dc-tabs-nav {
+  display: flex;
+  padding: 0.25rem;
+  background-color: var(--dc-tabs-bg, #f1f5f9);
+  border: 1px solid var(--dc-border-color, #e2e8f0);
+  user-select: none;
+}
+
+.dc-tab-button {
+  flex: 1;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.625rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-radius: 0.125rem;
+  transition: all 0.1s ease-out;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--dc-tab-inactive, #94a3b8);
+}
+
+.dc-tab-button:hover {
+  color: var(--dc-tab-hover, #64748b);
+  background-color: var(--dc-tab-hover-bg, rgba(148, 163, 184, 0.1));
+}
+
+.dc-tab-button--active {
+  background-color: var(--dc-tab-active-bg, #ffffff);
+  color: var(--dc-text-primary, #334155);
+  transform: scale(1.02);
+}
+
+.dc-tabs-content {
+  padding: 0 1rem 1rem;
+  min-height: 2.5rem;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+.dc-tab-content {
+  animation: dc-fade-in 0.1s ease-out;
+}
+
+.dc-tab-content--found {
+  /* Specific styles for found tab */
+}
+
+.dc-tab-content--expected {
+  color: var(--dc-text-secondary, #64748b);
+}
+
+.dc-tab-content--diff {
+  /* Specific styles for diff tab */
+}
+
+.dc-tab-text-wrapper {
+  position: relative;
+  padding: 0.5rem;
+}
+
+.dc-tab-text {
+  /* Base text styling */
+}
+
+.dc-copy-button-wrapper {
+  position: absolute;
+  top: 0;
+  right: 1rem;
+  z-index: 10;
+}
+
+.dc-tab-empty {
+  color: var(--dc-text-tertiary, #94a3b8);
+  font-style: italic;
+}
+
+.dc-exact-match-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.dc-exact-match-content {
+  padding: 0 1rem 1rem;
+  min-height: 2.5rem;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+.dc-exact-match-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  font-weight: 600;
+}
+
+.dc-check-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 0.6rem;
+  height: 0.6rem;
+}
+
+.dc-diff-result {
+  word-break: break-word;
+  white-space: pre-wrap;
+  position: relative;
+}
+
+.dc-diff-block--added {
+  background-color: var(--dc-diff-added-block-bg, rgba(236, 253, 245, 1));
+  margin: 0 -0.25rem;
+  padding: 0 0.25rem;
+  border-radius: 0.125rem;
+}
+
+.dc-diff-block--removed {
+  background-color: var(--dc-diff-removed-block-bg, rgba(254, 242, 242, 1));
+  margin: 0 -0.25rem;
+  padding: 0 0.25rem;
+  border-radius: 0.125rem;
+  opacity: 0.6;
+}
+
+/* Dark mode for diff and tabs */
+@media (prefers-color-scheme: dark) {
+  .dc-tabs-nav {
+    --dc-tabs-bg: #1e293b;
+    --dc-border-color: #334155;
+  }
+
+  .dc-tab-button--active {
+    --dc-tab-active-bg: #475569;
+  }
+
+  .dc-diff-block--added {
+    --dc-diff-added-block-bg: rgba(16, 185, 129, 0.15);
+  }
+
+  .dc-diff-block--removed {
+    --dc-diff-removed-block-bg: rgba(239, 68, 68, 0.1);
+  }
+
+  .dc-diff-part--added {
+    --dc-diff-added-highlight: rgba(16, 185, 129, 0.25);
+  }
+}