reqwise-core 1.0.0 → 1.1.1

package/src/styles.ts

@@ -1,730 +0,0 @@
-export const styles = `
-:root {
-  --rq-bg: #18181b;
-  --rq-bg-secondary: #27272a;
-  --rq-fg: #f4f4f5;
-  --rq-fg-secondary: #a1a1aa;
-  --rq-border: #3f3f46;
-  --rq-accent: #10b981;
-  --rq-error: #ef4444;
-  --rq-warning: #f97316;
-  --rq-info: #3b82f6;
-  --rq-width: 50%;
-  --rq-min-width: 320px;
-  --rq-z: 99999;
-  --rq-shadow: 0 20px 25px -5px rgba(0,0,0,0.5);
-  --rq-radius: 8px;
-  --rq-duration: 300ms;
-}
-
-html[data-rq-theme="light"] {
-  --rq-bg: #ffffff;
-  --rq-bg-secondary: #f4f4f5;
-  --rq-fg: #18181b;
-  --rq-fg-secondary: #71717a;
-  --rq-border: #e4e4e7;
-  --rq-accent: #0b84ff;
-  --rq-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-#reqwise-panel {
-  position: fixed;
-  right: 0;
-  top: 0;
-  height: auto;
-  width: var(--rq-width);
-  min-width: var(--rq-min-width);
-  max-width: 800px;
-  background: var(--rq-bg);
-  color: var(--rq-fg);
-  box-shadow: var(--rq-shadow);
-  z-index: var(--rq-z);
-  display: flex;
-  flex-direction: column;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
-  overflow: visible;
-  transition: transform var(--rq-duration) ease;
-}
-
-#reqwise-panel.hidden { display: none !important; }
-
-/* Header Section */
-#reqwise-panel .rq-header {
-  padding: 16px 24px;
-  border-bottom: 1px solid var(--rq-border);
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-#reqwise-panel .rq-header-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-#reqwise-panel .rq-banner {
-  height: 28px;
-  object-fit: contain;
-}
-
-#reqwise-panel .rq-header-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  position: relative;
-}
-
-#reqwise-panel .rq-lang-btn {
-  background: transparent;
-  border: 1px solid var(--rq-border);
-  color: var(--rq-fg);
-  padding: 6px 8px;
-  border-radius: 6px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-#reqwise-panel .rq-lang-dropdown {
-  position: absolute;
-  right: 0;
-  top: 40px;
-  background: var(--rq-bg);
-  border: 1px solid var(--rq-border);
-  border-radius: 8px;
-  padding: 8px;
-  min-width: 120px;
-  box-shadow: var(--rq-shadow);
-  z-index: calc(var(--rq-z) + 10);
-}
-
-.rq-lang-item {
-  display: block;
-  width: 100%;
-  text-align: left;
-  padding: 8px 10px;
-  border: none;
-  background: transparent;
-  color: var(--rq-fg);
-  cursor: pointer;
-  border-radius: 6px;
-}
-
-.rq-lang-item:hover { background: rgba(255,255,255,0.03); }
-.rq-lang-item.selected { background: rgba(255,255,255,0.06); font-weight: 700; }
-
-/* Header layout: left banner, right controls */
-#reqwise-panel .rq-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-#reqwise-panel .rq-header-left { display: flex; align-items: center; gap: 12px }
-.rq-banner { height: 36px; display: block }
-
-.rq-header-right { position: relative }
-.rq-lang-btn { display:flex; align-items:center; gap:8px; background:transparent; border:none; color:var(--rq-fg); cursor:pointer; font-weight:600 }
-.rq-world { font-size:18px }
-.rq-lang-dropdown { position: absolute; right:0; top:calc(100% + 8px); background: var(--rq-bg); border: 1px solid var(--rq-border); box-shadow: 0 8px 20px rgba(0,0,0,0.3); border-radius:6px; padding:8px; min-width:140px; z-index: calc(var(--rq-z) + 10) }
-.rq-lang-item { display:block; width:100%; padding:8px 10px; text-align:left; background:transparent; border:none; color:var(--rq-fg); cursor:pointer; border-radius:4px }
-.rq-lang-item:hover { background: rgba(255,255,255,0.02) }
-.rq-lang-item.selected { background: rgba(255,255,255,0.04); font-weight:700 }
-
-/* Tabs Section */
-#reqwise-panel .rq-tabs {
-  display: flex;
-  gap: 32px;
-  padding: 0 24px;
-  border-bottom: 1px solid var(--rq-border);
-  flex-shrink: 0;
-  background: var(--rq-bg);
-}
-
-#reqwise-panel .rq-tab {
-  padding: 12px 0;
-  cursor: pointer;
-  background: none;
-  border: none;
-  color: var(--rq-fg-secondary);
-  font-size: 14px;
-  font-weight: 600;
-  border-bottom: 2px solid transparent;
-  transition: all var(--rq-duration) ease-out;
-  white-space: nowrap;
-}
-
-#reqwise-panel .rq-tab:hover {
-  color: var(--rq-fg);
-}
-
-#reqwise-panel .rq-tab.active {
-  color: var(--rq-fg);
-  border-bottom-color: var(--rq-fg);
-}
-
-/* Body/Content */
-#reqwise-panel .rq-body {
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 24px;
-  flex: 1 1 auto;
-  scroll-behavior: smooth;
-}
-
-#reqwise-panel .rq-body::-webkit-scrollbar {
-  width: 8px;
-}
-
-#reqwise-panel .rq-body::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-#reqwise-panel .rq-body::-webkit-scrollbar-thumb {
-  background: var(--rq-border);
-  border-radius: 4px;
-}
-
-#reqwise-panel .rq-body::-webkit-scrollbar-thumb:hover {
-  background: var(--rq-fg-secondary);
-}
-
-/* Empty State */
-.rq-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  min-height: 300px;
-  color: var(--rq-fg-secondary);
-  text-align: center;
-}
-
-.rq-empty svg {
-  width: 64px;
-  height: 64px;
-  margin-bottom: 16px;
-  opacity: 0.5;
-}
-
-.rq-empty p {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-/* Cards & Entries */
-.rq-card {
-  margin-bottom: 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.rq-card-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.rq-card-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--rq-fg);
-  margin: 0;
-  flex: 1;
-  min-width: 150px;
-}
-
-/* Status Badges */
-.rq-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 4px 10px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.rq-badge.loading {
-  background: rgba(59, 130, 246, 0.1);
-  color: #3b82f6;
-}
-
-.rq-badge.error {
-  background: rgba(239, 68, 68, 0.1);
-  color: #ef4444;
-}
-
-.rq-badge.success {
-  background: rgba(16, 185, 129, 0.1);
-  color: #10b981;
-}
-
-/* Metadata */
-.rq-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  font-size: 13px;
-  color: var(--rq-fg-secondary);
-}
-
-.rq-meta-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.rq-meta-label {
-  font-weight: 500;
-  color: var(--rq-fg-secondary);
-}
-
-.rq-meta-code {
-  background: var(--rq-bg-secondary);
-  color: var(--rq-fg);
-  padding: 3px 8px;
-  border-radius: 3px;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 12px;
-}
-
-.rq-meta-status {
-  padding: 3px 8px;
-  border-radius: 3px;
-  font-weight: 600;
-  font-size: 12px;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-}
-
-.rq-meta-status.status-2xx {
-  background: rgba(16, 185, 129, 0.1);
-  color: #10b981;
-}
-
-.rq-meta-status.status-4xx,
-.rq-meta-status.status-5xx {
-  background: rgba(239, 68, 68, 0.1);
-  color: #ef4444;
-}
-
-/* Section */
-.rq-section {
-  margin-bottom: 20px;
-}
-
-.rq-section-label {
-  font-size: 12px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--rq-fg-secondary);
-  margin-bottom: 8px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.rq-section-content {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-/* JSON Highlighting */
-.rq-json {
-  background: var(--rq-bg-secondary);
-  border: 1px solid var(--rq-border);
-  border-radius: var(--rq-radius);
-  padding: 12px;
-  overflow-x: auto;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 12px;
-  line-height: 1.6;
-  color: var(--rq-fg);
-}
-
-.rq-json-key {
-  color: #0ea5e9;
-}
-
-.rq-json-string {
-  color: #10b981;
-}
-
-.rq-json-number {
-  color: #fbbf24;
-}
-
-.rq-json-boolean {
-  color: #c084fc;
-}
-
-.rq-json-null {
-  color: #f87171;
-}
-
-.rq-json-bracket {
-  color: var(--rq-fg-secondary);
-}
-
-/* Code Block (for Request/Response body) */
-.rq-code-block {
-  background: var(--rq-bg-secondary);
-  border: 1px solid var(--rq-border);
-  border-radius: var(--rq-radius);
-  padding: 12px;
-  overflow-x: auto;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 12px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-/* Tables */
-.rq-table {
-  width: 100%;
-  border-collapse: collapse;
-  border: 1px solid var(--rq-border);
-  border-radius: var(--rq-radius);
-  overflow: hidden;
-}
-
-.rq-table thead {
-  background: var(--rq-bg-secondary);
-}
-
-.rq-table th {
-  padding: 12px;
-  text-align: left;
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--rq-fg-secondary);
-  border-bottom: 1px solid var(--rq-border);
-}
-
-.rq-table td {
-  padding: 12px;
-  border-bottom: 1px solid var(--rq-border);
-  color: var(--rq-fg);
-  font-size: 13px;
-}
-
-.rq-table tbody tr {
-  transition: background-color var(--rq-duration) ease-out;
-}
-
-.rq-table tbody tr:hover {
-  background: rgba(255, 255, 255, 0.02);
-}
-
-.rq-table tbody tr:last-child td {
-  border-bottom: none;
-}
-
-/* Forms */
-.rq-form {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.rq-form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.rq-form-label {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--rq-fg);
-}
-
-.rq-form-input,
-.rq-form-textarea,
-.rq-form-select {
-  padding: 10px 12px;
-  border: 1px solid var(--rq-border);
-  border-radius: 6px;
-  background: var(--rq-bg-secondary);
-  color: var(--rq-fg);
-  font-size: 13px;
-  font-family: inherit;
-  transition: border-color var(--rq-duration) ease-out, background-color var(--rq-duration) ease-out;
-}
-
-.rq-form-input:hover,
-.rq-form-textarea:hover,
-.rq-form-select:hover {
-  border-color: var(--rq-fg-secondary);
-}
-
-.rq-form-input:focus,
-.rq-form-textarea:focus,
-.rq-form-select:focus {
-  outline: none;
-  border-color: var(--rq-accent);
-  background: var(--rq-bg);
-}
-
-.rq-form-textarea {
-  resize: vertical;
-  min-height: 100px;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-}
-
-/* Buttons */
-.rq-btn {
-  padding: 10px 16px;
-  border: 1px solid var(--rq-border);
-  border-radius: 6px;
-  background: transparent;
-  color: var(--rq-fg);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all var(--rq-duration) ease-out;
-  white-space: nowrap;
-}
-
-.rq-btn:hover {
-  border-color: var(--rq-fg-secondary);
-  background: rgba(255, 255, 255, 0.04);
-}
-
-.rq-btn.primary {
-  background: var(--rq-accent);
-  border-color: var(--rq-accent);
-  color: #000;
-}
-
-.rq-btn.primary:hover {
-  opacity: 0.9;
-}
-
-/* Placements */
-#reqwise-panel.placement-left {
-  left: 0;
-  right: auto;
-  height: 100vh;
-}
-
-/* Ensure right placement also fills viewport height */
-#reqwise-panel.placement-right {
-  height: 100vh;
-}
-
-
-#reqwise-panel.placement-top {
-  top: 0;
-  left: 0;
-  right: 0;
-  width: 100vw;
-  box-sizing: border-box;
-  min-width: unset;
-  max-width: unset;
-  height: 50%;
-  min-height: 320px;
-  max-height: unset;
-  margin: 0;
-  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
-}
-
-
-#reqwise-panel.placement-bottom {
-  bottom: 0;
-  top: auto;
-  left: 0;
-  right: 0;
-  width: 100vw;
-  box-sizing: border-box;
-  min-width: unset;
-  max-width: unset;
-  height: 50%;
-  min-height: 320px;
-  max-height: unset;
-  margin: 0;
-  box-shadow: 0 -4px 6px -1px rgba(0,0,0,0.1), 0 -2px 4px -1px rgba(0,0,0,0.06);
-}
-
-/* Toggle Button: positioned relative to the panel and oriented perpendicular */
-.rq-toggle {
-  position: absolute;
-  width: auto;
-  height: auto;
-  padding: 8px 12px;
-  border: none;
-  background: var(--rq-bg);
-  color: var(--rq-fg);
-  z-index: calc(var(--rq-z) + 2);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  font-size: 13px;
-  font-weight: 600;
-  box-shadow: var(--rq-shadow);
-  transition: transform var(--rq-duration) ease-out, background var(--rq-duration) ease-out;
-  border-radius: 4px;
-  overflow: visible;
-  writing-mode: horizontal-tb; /* default: horizontal for top/bottom placements */
-  text-orientation: mixed;
-  visibility: visible !important;
-  display: inline-flex !important;
-}
-
-.rq-toggle:hover { transform: scale(1.03); }
-
-.rq-toggle img { width: 20px; height: 20px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08)); }
-
-/* Placement-specific toggle positioning (relative to panel so it moves with it) */
-#reqwise-panel.placement-right .rq-toggle {
-  position: absolute;
-  left: -40px; /* adjacent to panel, to the left */
-  top: 50%;
-  transform: translateY(-50%);
-  border-radius: 6px 0 0 6px;
-  writing-mode: vertical-rl; /* vertical text, reading from right side */
-  width: 40px;
-}
-
-#reqwise-panel.placement-left .rq-toggle {
-  position: absolute;
-  right: -40px; /* adjacent to panel, to the right (panel on left) */
-  top: 50%;
-  transform: translateY(-50%);
-  border-radius: 0 6px 6px 0;
-  writing-mode: vertical-rl; /* match right placement so text faces inward */
-  width: 40px;
-}
-
-/* Rotate logo when toggle is vertical so it faces toward the page (opposite of panel) */
-#reqwise-panel.placement-right .rq-toggle img { transform: rotate(90deg); }
-#reqwise-panel.placement-left .rq-toggle img { transform: rotate(-90deg); }
-
-#reqwise-panel.placement-top .rq-toggle {
-  position: absolute;
-  bottom: -40px; /* place toggle below the top panel (under it) */
-  left: 50%;
-  transform: translateX(-50%);
-  writing-mode: horizontal-tb;
-  border-radius: 0 0 6px 6px;
-  width: auto;
-  min-width: 140px;
-  padding: 8px 16px;
-}
-
-#reqwise-panel.placement-bottom .rq-toggle {
-  position: absolute;
-  top: -40px; /* place toggle above the bottom panel (on top of it) */
-  left: 50%;
-  transform: translateX(-50%);
-  writing-mode: horizontal-tb;
-  border-radius: 6px 6px 0 0;
-  width: auto;
-  min-width: 140px;
-  padding: 8px 16px;
-}
-
-.rq-toggle span { white-space: nowrap; }
-
-/* Scale wrapper: transforms content inside aside without affecting panel slide transform */
-.rq-scale-wrapper {
-  transform-origin: center center;
-  transition: transform var(--rq-duration) ease;
-}
-
-/* Zoom controls in header */
-.rq-zoom-controls { display: inline-flex; gap: 6px; align-items: center; margin-right: 8px }
-.rq-zoom-btn { background: transparent; border: 1px solid var(--rq-border); color: var(--rq-fg); padding: 6px 8px; border-radius: 6px; cursor: pointer; font-weight: 700 }
-.rq-zoom-btn:hover { background: rgba(255,255,255,0.02) }
-
-/* Panel closed states: slide fully off-screen toward its placement */
-#reqwise-panel.placement-right.rq-closed { transform: translateX(100%); }
-#reqwise-panel.placement-left.rq-closed { transform: translateX(-100%); }
-#reqwise-panel.placement-top.rq-closed { transform: translateY(-100%); }
-#reqwise-panel.placement-bottom.rq-closed { transform: translateY(100%); }
-
-/* Corner handles for resize cursor (invisible) */
-.rq-corner-handle {
-  position: absolute;
-  width: 18px;
-  height: 18px;
-  background: transparent;
-  z-index: calc(var(--rq-z) + 5);
-}
-.rq-corner-top-left { left: -8px; top: -8px; cursor: nwse-resize; }
-.rq-corner-top-right { right: -8px; top: -8px; cursor: nesw-resize; }
-.rq-corner-bottom-left { left: -8px; bottom: -8px; cursor: nesw-resize; }
-.rq-corner-bottom-right { right: -8px; bottom: -8px; cursor: nwse-resize; }
-
-/* Responsive */
-@media (max-width: 768px) {
-  :root {
-    --rq-width: 100%;
-    --rq-min-width: 100%;
-  }
-
-  #reqwise-panel {
-    width: 100%;
-    min-width: unset;
-    max-width: unset;
-    position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
-    height: 100%;
-  }
-
-  #reqwise-panel.placement-left,
-  #reqwise-panel.placement-right {
-    width: 100%;
-  }
-
-  .rq-toggle {
-    width: 100%;
-    height: auto;
-    border-radius: 0;
-    border-left: none;
-  }
-
-  .rq-toggle:hover {
-    padding-left: 12px;
-  }
-
-  .rq-toggle svg {
-    display: none;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
-`;
-
-export default styles;