@quickflo/quickview 1.0.0

package/README.md

@@ -0,0 +1,222 @@
+# @quickflo/quickview
+
+A Vue 3 component library for intelligently rendering complex data structures. Automatically detects and beautifully displays HTTP responses, file objects, errors, arrays, nested objects, and primitive types with built-in search, copy, and navigation.
+
+## Features
+
+- **Smart Type Detection** - Automatically identifies and renders HTTP responses, file objects, errors, dates, URLs, emails, colors, and more
+- **Pluggable Renderer System** - Register custom renderers for domain-specific data types
+- **Built-in Search** - Search across keys, values, and paths with jump-to navigation
+- **Collapsible Structures** - Expand/collapse nested objects and arrays with configurable default depth
+- **File Downloads** - Built-in file renderer with customizable download handler for cloud storage (GCS, S3, SFTP)
+- **Copy Support** - One-click copy for individual values or entire structures
+- **Quasar Integration** - Built with Quasar components for a polished UI
+
+## Installation
+
+```bash
+npm install @quickflo/quickview
+# or
+pnpm add @quickflo/quickview
+# or
+yarn add @quickflo/quickview
+```
+
+### Peer Dependencies
+
+QuickView requires Vue 3 and Quasar:
+
+```bash
+npm install vue quasar @quasar/extras
+```
+
+## Quick Start
+
+```vue
+<script setup>
+import { QuickView } from '@quickflo/quickview'
+import '@quickflo/quickview/styles'
+
+const data = {
+  status: 200,
+  statusText: 'OK',
+  headers: { 'content-type': 'application/json' },
+  body: {
+    users: [
+      { id: 1, name: 'Alice', email: 'alice@example.com' },
+      { id: 2, name: 'Bob', email: 'bob@example.com' },
+    ]
+  }
+}
+</script>
+
+<template>
+  <QuickView :value="data" />
+</template>
+```
+
+## Built-in Renderers
+
+### Primitives
+- `null` / `undefined` - Styled null indicators
+- `boolean` - Color-coded true/false chips
+- `number` - Formatted numbers
+- `string` - With smart detection for URLs, emails, dates, colors, JSON, base64
+
+### Smart String Detection
+- **URLs** - Clickable links with external icon
+- **Emails** - Mailto links
+- **Dates** - Formatted with relative time
+- **Colors** - Hex/RGB preview swatches
+- **JSON Strings** - Parsed and rendered as objects
+- **Base64** - Decoded preview with copy support
+- **Long Text** - Truncated with expand option
+
+### Structures
+- **Objects** - Collapsible with key-value display
+- **Arrays** - Collapsible with item count, table view for homogeneous data
+- **Empty** - Styled empty object/array indicators
+
+### Domain Types
+- **HTTP Response** - Status badge, collapsible headers, body preview
+- **File Object** - Icon, mime type, size, download button, image preview
+- **Error Object** - Error styling, stack trace, details expansion
+
+## Options
+
+```typescript
+interface QuickViewOptions {
+  // Default depth to auto-expand (default: 2)
+  maxAutoExpandDepth?: number
+
+  // Max string length before truncation (default: 500)
+  maxStringLength?: number
+
+  // Max array items in collapsed preview (default: 5)
+  maxArrayPreview?: number
+
+  // Show copy buttons on hover (default: true)
+  showCopyButtons?: boolean
+
+  // Custom renderers to add/override
+  renderers?: RegisteredRenderer[]
+
+  // Handler for file downloads (cloud storage support)
+  onDownload?: (file: FileObject) => void | Promise<void>
+}
+```
+
+### Example with Options
+
+```vue
+<template>
+  <QuickView
+    :value="workflowOutput"
+    :options="{
+      maxAutoExpandDepth: 3,
+      onDownload: handleFileDownload
+    }"
+  />
+</template>
+
+<script setup>
+async function handleFileDownload(file) {
+  // Call your API to get a signed URL for cloud storage files
+  const signedUrl = await api.getSignedUrl(file.url)
+  window.open(signedUrl, '_blank')
+}
+</script>
+```
+
+## Custom Renderers
+
+Register custom renderers for your domain types:
+
+```typescript
+import {
+  QuickView,
+  RendererRegistry,
+  createDefaultRegistry
+} from '@quickflo/quickview'
+
+// Create a registry with default renderers
+const registry = createDefaultRegistry()
+
+// Add a custom renderer
+registry.register({
+  name: 'user-avatar',
+  priority: 100,
+  tester: (value) => {
+    return (
+      typeof value === 'object' &&
+      value !== null &&
+      'avatarUrl' in value &&
+      'displayName' in value
+    )
+  },
+  component: UserAvatarRenderer
+})
+```
+
+```vue
+<template>
+  <QuickView :value="data" :registry="registry" />
+</template>
+```
+
+## File Object Shape
+
+The file renderer detects objects with this shape:
+
+```typescript
+interface FileObject {
+  url?: string          // gs://, s3://, sftp://, or https://
+  content?: string      // File content (base64 or text)
+  filename?: string     // Display name
+  mimeType?: string     // MIME type for icon/preview
+  size?: number         // Size in bytes
+  isBase64?: boolean    // Whether content is base64 encoded
+  metadata?: Record<string, unknown>
+}
+```
+
+## Styling
+
+QuickView uses CSS custom properties for theming:
+
+```css
+.quickview {
+  --qv-bg: #ffffff;
+  --qv-bg-hover: #f8fafc;
+  --qv-bg-selected: #e0e7ff;
+  --qv-border: #e2e8f0;
+  --qv-text: #1e293b;
+  --qv-text-muted: #64748b;
+  --qv-text-subtle: #94a3b8;
+  --qv-info: #6366f1;
+  --qv-success: #22c55e;
+  --qv-warning: #f59e0b;
+  --qv-error: #ef4444;
+  --qv-mono: 'SF Mono', Menlo, Monaco, monospace;
+}
+```
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start dev server with demo
+pnpm dev
+
+# Build library
+pnpm build
+
+# Type check
+pnpm typecheck
+```
+
+## License
+
+MIT

package/dist/components/QuickView.vue.d.ts

@@ -0,0 +1,20 @@
+import { RendererRegistry } from '../registry';
+import { QuickViewOptions } from '../types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps } from 'vue';
+import { QInputProps, QInputSlots } from 'quasar';
+interface Props {
+    value: unknown;
+    options?: QuickViewOptions;
+    registry?: RendererRegistry;
+}
+declare const _default: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props> & Readonly<{}>, {
+    options: QuickViewOptions;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+    searchInputRef: {
+        $props: VNodeProps & AllowedComponentProps & ComponentCustomProps & QInputProps;
+        $slots: QInputSlots;
+    } | null;
+    contentRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=QuickView.vue.d.ts.map

package/dist/components/QuickView.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickView.vue.d.ts","sourceRoot":"","sources":["../../components/QuickView.vue"],"names":[],"mappings":";;AAyFA;AA0cA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD,UAAU,KAAK;IACb,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;CAC7B;;aAFW,gBAAgB;;;;;;;;AAylB5B,wBASG"}

package/dist/components/SmartValue.vue.d.ts

@@ -0,0 +1,18 @@
+import { FileObject } from '../types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+interface Props {
+    value: unknown;
+    path?: string;
+    keyName?: string;
+    depth?: number;
+    parent?: unknown;
+    onNavigate?: (path: string) => void;
+    onCopy?: (value: unknown, path: string) => void;
+    onDownload?: (file: FileObject) => void | Promise<void>;
+}
+declare const _default: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props> & Readonly<{}>, {
+    path: string;
+    depth: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=SmartValue.vue.d.ts.map

package/dist/components/SmartValue.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartValue.vue.d.ts","sourceRoot":"","sources":["../../components/SmartValue.vue"],"names":[],"mappings":";AAQA;AAiEA,OAAO,KAAK,EAAmB,UAAU,EAAE,MAAM,UAAU,CAAA;AAG3D,UAAU,KAAK;IACb,KAAK,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/C,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CACxD;;UAPQ,MAAM;WAEL,MAAM;;AAkGhB,wBAOG"}

package/dist/composables/useExpansionState.d.ts

@@ -0,0 +1,38 @@
+import { Ref } from 'vue';
+export interface ExpansionState {
+    /** Map of expanded paths (using object for reactivity) */
+    expandedPaths: Ref<Record<string, boolean>>;
+    /** Currently highlighted path (for search results) */
+    highlightedPath: Ref<string | null>;
+    /** Expansion version - increments on expandAll/collapseAll to force re-render */
+    version: Ref<number>;
+}
+export interface ExpansionActions {
+    /** Check if a path is expanded */
+    isExpanded: (path: string) => boolean;
+    /** Toggle expansion for a path */
+    toggle: (path: string) => void;
+    /** Expand a specific path */
+    expand: (path: string) => void;
+    /** Collapse a specific path */
+    collapse: (path: string) => void;
+    /** Expand all paths up to a certain depth */
+    expandAll: (maxDepth?: number, rootValue?: unknown) => void;
+    /** Collapse all paths */
+    collapseAll: () => void;
+    /** Expand all parent paths to reveal a target path, then highlight it */
+    jumpToPath: (targetPath: string) => void;
+    /** Clear the highlight */
+    clearHighlight: () => void;
+    /** Check if a path is currently highlighted */
+    isHighlighted: (path: string) => boolean;
+}
+/**
+ * Create expansion state management for QuickView
+ */
+export declare function createExpansionState(_defaultExpandDepth?: number): {
+    state: ExpansionState;
+    actions: ExpansionActions;
+};
+export type { ExpansionState as ExpansionStateType };
+//# sourceMappingURL=useExpansionState.d.ts.map

package/dist/composables/useExpansionState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExpansionState.d.ts","sourceRoot":"","sources":["../../composables/useExpansionState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAEnC,MAAM,WAAW,cAAc;IAC7B,0DAA0D;IAC1D,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;IAC3C,sDAAsD;IACtD,eAAe,EAAE,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;IACnC,iFAAiF;IACjF,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAA;IACrC,kCAAkC;IAClC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,6BAA6B;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,+BAA+B;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,6CAA6C;IAC7C,SAAS,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3D,yBAAyB;IACzB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,yEAAyE;IACzE,UAAU,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,0BAA0B;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,+CAA+C;IAC/C,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAA;CACzC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,mBAAmB,SAAI,GAAG;IAC7D,KAAK,EAAE,cAAc,CAAA;IACrB,OAAO,EAAE,gBAAgB,CAAA;CAC1B,CAkHA;AAwBD,YAAY,EAAE,cAAc,IAAI,kBAAkB,EAAE,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+export { default as QuickView } from './components/QuickView.vue';
+export { default as SmartValue } from './components/SmartValue.vue';
+export { RendererRegistry, defaultRegistry } from './registry';
+export { createDefaultRegistry } from './setup';
+export * from './testers';
+export type { FileObject, RendererContext, RendererProps, TesterFunction, RegisteredRenderer, QuickViewOptions, DetectedType, } from './types';
+export * from './utils';
+export { default as NullRenderer } from './renderers/primitives/NullRenderer.vue';
+export { default as UndefinedRenderer } from './renderers/primitives/UndefinedRenderer.vue';
+export { default as BooleanRenderer } from './renderers/primitives/BooleanRenderer.vue';
+export { default as NumberRenderer } from './renderers/primitives/NumberRenderer.vue';
+export { default as StringRenderer } from './renderers/primitives/StringRenderer.vue';
+export { default as UrlRenderer } from './renderers/smart/UrlRenderer.vue';
+export { default as EmailRenderer } from './renderers/smart/EmailRenderer.vue';
+export { default as DateRenderer } from './renderers/smart/DateRenderer.vue';
+export { default as ColorRenderer } from './renderers/smart/ColorRenderer.vue';
+export { default as LongStringRenderer } from './renderers/smart/LongStringRenderer.vue';
+export { default as Base64Renderer } from './renderers/smart/Base64Renderer.vue';
+export { default as JsonStringRenderer } from './renderers/smart/JsonStringRenderer.vue';
+export { default as ObjectRenderer } from './renderers/structures/ObjectRenderer.vue';
+export { default as ArrayRenderer } from './renderers/structures/ArrayRenderer.vue';
+export { default as EmptyRenderer } from './renderers/structures/EmptyRenderer.vue';
+export { default as HttpResponseRenderer } from './renderers/domain/HttpResponseRenderer.vue';
+export { default as FileObjectRenderer } from './renderers/domain/FileObjectRenderer.vue';
+export { default as ErrorObjectRenderer } from './renderers/domain/ErrorObjectRenderer.vue';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAGA,OAAO,eAAe,CAAA;AAGtB,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAGnE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAG/C,cAAc,WAAW,CAAA;AAGzB,YAAY,EACV,UAAU,EACV,eAAe,EACf,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,GACb,MAAM,SAAS,CAAA;AAGhB,cAAc,SAAS,CAAA;AAGvB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,yCAAyC,CAAA;AACjF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAC3F,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,4CAA4C,CAAA;AACvF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,2CAA2C,CAAA;AACrF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,2CAA2C,CAAA;AAErF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qCAAqC,CAAA;AAC9E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAA;AAC5E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qCAAqC,CAAA;AAC9E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0CAA0C,CAAA;AACxF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sCAAsC,CAAA;AAChF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0CAA0C,CAAA;AAExF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,2CAA2C,CAAA;AACrF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAA;AACnF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAA;AAEnF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,6CAA6C,CAAA;AAC7F,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,2CAA2C,CAAA;AACzF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,4CAA4C,CAAA"}

package/dist/quickview.css

@@ -0,0 +1 @@
+.quickview{--qv-bg: #ffffff;--qv-bg-hover: #f8fafc;--qv-bg-selected: #eff6ff;--qv-border: #e2e8f0;--qv-text: #1e293b;--qv-text-muted: #64748b;--qv-text-subtle: #94a3b8;--qv-string: #059669;--qv-number: #2563eb;--qv-boolean: #7c3aed;--qv-null: #94a3b8;--qv-key: #0f172a;--qv-bracket: #64748b;--qv-success: #10b981;--qv-error: #ef4444;--qv-warning: #f59e0b;--qv-info: #3b82f6;--qv-mono: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", monospace;font-family:var(--qv-mono);font-size:13px;line-height:1.6;background:var(--qv-bg);border:1px solid var(--qv-border);border-radius:8px;overflow:hidden}.qv-mono{font-family:var(--qv-mono)}.qv-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qv-clickable{cursor:pointer}.qv-clickable:hover{background:var(--qv-bg-hover)}.qv-copy-btn{opacity:0;transition:opacity .15s ease}.qv-copy-target:hover .qv-copy-btn{opacity:1}.dark .quickview,.quickview.dark{--qv-bg: #1e293b;--qv-bg-hover: #334155;--qv-bg-selected: #1e3a5f;--qv-border: #475569;--qv-text: #f1f5f9;--qv-text-muted: #94a3b8;--qv-text-subtle: #64748b;--qv-string: #34d399;--qv-number: #60a5fa;--qv-boolean: #a78bfa;--qv-null: #64748b;--qv-key: #e2e8f0;--qv-bracket: #94a3b8}.qv-unknown[data-v-a944b92c]{color:var(--qv-text-muted);font-style:italic}.qv-null[data-v-9d11bc73],.qv-undefined[data-v-f5b5f6f8]{color:var(--qv-null);font-style:italic}.qv-boolean[data-v-a548880f]{color:var(--qv-boolean);display:inline-flex;align-items:center}.qv-number[data-v-6ccf2b38]{color:var(--qv-number)}.qv-string[data-v-ca8a8cad]{color:var(--qv-string);word-break:break-word}.quote[data-v-ca8a8cad]{color:var(--qv-string);opacity:.7}.value[data-v-ca8a8cad]{white-space:pre-wrap}.qv-url[data-v-c8a4b9a7]{display:inline-flex;align-items:center;gap:4px}.url-icon[data-v-c8a4b9a7]{color:var(--qv-info);flex-shrink:0}.url-link[data-v-c8a4b9a7]{color:var(--qv-info);text-decoration:none;word-break:break-all}.url-link[data-v-c8a4b9a7]:hover{text-decoration:underline}.open-btn[data-v-c8a4b9a7]{opacity:0;transition:opacity .15s ease;color:var(--qv-text-muted)}.qv-url:hover .open-btn[data-v-c8a4b9a7]{opacity:1}.qv-email[data-v-3aa3ca8e]{display:inline-flex;align-items:center;gap:4px}.email-icon[data-v-3aa3ca8e]{color:var(--qv-info);flex-shrink:0}.email-link[data-v-3aa3ca8e]{color:var(--qv-info);text-decoration:none}.email-link[data-v-3aa3ca8e]:hover{text-decoration:underline}.qv-date[data-v-64972e62]{display:inline-flex;align-items:center;gap:6px}.date-icon[data-v-64972e62]{color:var(--qv-text-muted);flex-shrink:0}.date-formatted[data-v-64972e62]{color:var(--qv-string)}.date-relative[data-v-64972e62]{color:var(--qv-text-subtle);font-size:.9em}.qv-color[data-v-df679191]{display:inline-flex;align-items:center;gap:6px}.color-swatch[data-v-df679191]{width:16px;height:16px;border-radius:3px;border:1px solid var(--qv-border);flex-shrink:0}.color-value[data-v-df679191]{color:var(--qv-string);font-family:inherit}.qv-long-string[data-v-06922b61]{display:flex;flex-direction:column;gap:8px}.string-header[data-v-06922b61]{display:flex;align-items:center;gap:8px;color:var(--qv-text-muted);font-size:12px}.string-length[data-v-06922b61]{color:var(--qv-text-subtle)}.string-content[data-v-06922b61]{background:var(--qv-bg-hover);border-radius:4px;padding:8px 12px;max-height:150px;overflow:hidden;transition:max-height .3s ease}.string-content.expanded[data-v-06922b61]{max-height:none}.string-content pre[data-v-06922b61]{margin:0;white-space:pre-wrap;word-break:break-word;color:var(--qv-string);font-size:12px}.qv-base64[data-v-01a0d3e1]{display:flex;flex-direction:column;gap:8px}.base64-header[data-v-01a0d3e1]{display:flex;align-items:center;gap:8px;color:var(--qv-text-muted);font-size:12px}.base64-label[data-v-01a0d3e1]{background:#e0e7ff;color:#4f46e5;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:500}.base64-size[data-v-01a0d3e1]{color:var(--qv-text-subtle)}.base64-content[data-v-01a0d3e1]{background:var(--qv-bg-hover);border-radius:4px;padding:8px 12px;overflow:hidden}.encoded-text[data-v-01a0d3e1],.decoded-text[data-v-01a0d3e1]{margin:0;white-space:pre-wrap;word-break:break-all;color:var(--qv-text-muted);font-size:11px;max-height:100px;overflow:auto}.decoded-image[data-v-01a0d3e1]{max-width:100%;max-height:200px;border-radius:4px}.qv-json-string[data-v-e8c37fcb]{display:flex;flex-direction:column;gap:8px}.json-header[data-v-e8c37fcb]{display:flex;align-items:center;gap:8px;color:var(--qv-text-muted);font-size:12px}.json-label[data-v-e8c37fcb]{background:#fef3c7;color:#92400e;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:500}.json-content[data-v-e8c37fcb]{background:var(--qv-bg-hover);border-radius:4px;padding:8px 12px}.json-preview[data-v-e8c37fcb]{color:var(--qv-text-muted);font-size:12px}.qv-object.is-root[data-v-95f1d502]{padding:12px}.qv-object.is-highlighted>.object-header[data-v-95f1d502]{animation:highlight-pulse-95f1d502 2s ease-out}.object-header[data-v-95f1d502]{display:flex;align-items:center;gap:4px;padding:2px 4px;margin-left:-4px;border-radius:4px}.expand-icon[data-v-95f1d502]{color:var(--qv-text-muted);transition:transform .15s ease}.bracket[data-v-95f1d502]{color:var(--qv-bracket)}.preview[data-v-95f1d502]{color:var(--qv-text-muted);font-size:.95em;margin:0 4px}.key-count[data-v-95f1d502]{color:var(--qv-text-subtle);font-size:11px;margin-left:8px}.object-entries[data-v-95f1d502]{margin-left:16px;border-left:1px solid var(--qv-border);padding-left:12px}.object-entry[data-v-95f1d502]{display:flex;align-items:flex-start;gap:4px;padding:3px 4px;margin:0 -4px;position:relative;border-radius:4px;transition:background-color .15s ease}.object-entry[data-v-95f1d502]:hover{background:var(--qv-bg-hover)}.object-entry.is-highlighted[data-v-95f1d502]{animation:highlight-pulse-95f1d502 2s ease-out}.entry-key[data-v-95f1d502]{color:var(--qv-key);flex-shrink:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.colon[data-v-95f1d502]{color:var(--qv-bracket);margin-right:6px}.entry-value[data-v-95f1d502]{flex:1;min-width:0}.entry-copy[data-v-95f1d502]{position:absolute;right:4px;top:2px}.closing-bracket[data-v-95f1d502]{margin-top:2px}@keyframes highlight-pulse-95f1d502{0%{background-color:#6366f14d}50%{background-color:#6366f126}to{background-color:transparent}}.qv-array.is-root[data-v-dc619f16]{padding:12px}.qv-array.is-highlighted>.array-header[data-v-dc619f16]{animation:highlight-pulse-dc619f16 2s ease-out}.array-header[data-v-dc619f16]{display:flex;align-items:center;gap:4px;padding:2px 4px;margin-left:-4px;border-radius:4px}.expand-icon[data-v-dc619f16]{color:var(--qv-text-muted)}.bracket[data-v-dc619f16]{color:var(--qv-bracket)}.preview[data-v-dc619f16]{color:var(--qv-text-muted);font-size:.95em;margin:0 4px}.length-chip[data-v-dc619f16]{font-size:10px;height:18px}.view-toggle[data-v-dc619f16]{margin-left:8px}.array-items[data-v-dc619f16]{margin-left:16px;border-left:1px solid var(--qv-border);padding-left:12px}.array-item[data-v-dc619f16]{display:flex;align-items:flex-start;gap:8px;padding:3px 4px;margin:0 -4px;border-radius:4px;transition:background-color .15s ease}.array-item[data-v-dc619f16]:hover{background:var(--qv-bg-hover)}.array-item.is-highlighted[data-v-dc619f16]{animation:highlight-pulse-dc619f16 2s ease-out}.item-index[data-v-dc619f16]{color:var(--qv-text-subtle);font-size:11px;min-width:24px;text-align:right;flex-shrink:0}.item-value[data-v-dc619f16]{flex:1;min-width:0}.show-more[data-v-dc619f16]{padding:8px 0}.closing-bracket[data-v-dc619f16]{margin-top:2px}.array-table-container[data-v-dc619f16]{margin:8px 0;border:1px solid var(--qv-border);border-radius:6px;overflow:hidden}.array-table [data-v-dc619f16] th{font-weight:600;background:var(--qv-bg-hover)}.array-table [data-v-dc619f16] td{font-family:inherit;vertical-align:top}@keyframes highlight-pulse-dc619f16{0%{background-color:#6366f14d}50%{background-color:#6366f126}to{background-color:transparent}}.qv-empty[data-v-ac41a1e6]{display:inline-flex;align-items:center;gap:6px}.bracket[data-v-ac41a1e6]{color:var(--qv-bracket)}.label[data-v-ac41a1e6]{color:var(--qv-text-subtle);font-size:11px;font-style:italic}.qv-http-response[data-v-7227aa88]{border:1px solid var(--qv-border);border-radius:8px;overflow:hidden;background:var(--qv-bg)}.http-status-bar[data-v-7227aa88]{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--qv-bg-hover);border-bottom:1px solid var(--qv-border)}.status-chip[data-v-7227aa88]{font-weight:600}.response-url[data-v-7227aa88]{color:var(--qv-text-muted);font-size:12px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.response-timing[data-v-7227aa88]{display:flex;align-items:center;gap:4px;color:var(--qv-text-subtle);font-size:12px;flex-shrink:0}.http-sections [data-v-7227aa88] .q-expansion-item{border-bottom:1px solid var(--qv-border)}.http-sections [data-v-7227aa88] .q-expansion-item:last-child{border-bottom:none}.section-header[data-v-7227aa88]{padding:8px 12px!important;min-height:40px!important}.section-title[data-v-7227aa88]{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--qv-text)}.headers-content[data-v-7227aa88]{background:var(--qv-bg-hover)}.headers-toolbar[data-v-7227aa88],.body-toolbar[data-v-7227aa88]{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid var(--qv-border)}.view-toggle[data-v-7227aa88]{display:flex;gap:2px}.toggle-btn[data-v-7227aa88]{border:none;background:transparent;color:var(--qv-text-subtle);font-size:11px;font-weight:500;padding:3px 6px;border-radius:3px;cursor:pointer;transition:all .15s ease;font-family:inherit}.toggle-btn[data-v-7227aa88]:hover{color:var(--qv-text-muted)}.toggle-btn.active[data-v-7227aa88]{color:var(--qv-text-muted);background:#0000000a}.raw-headers[data-v-7227aa88]{margin:0;padding:12px;font-size:12px;white-space:pre-wrap;word-break:break-word;color:var(--qv-text)}.header-row[data-v-7227aa88]{display:flex;gap:12px;padding:4px 12px;font-size:12px;border-radius:4px}.header-row.is-highlighted[data-v-7227aa88]{animation:highlight-pulse-7227aa88 2s ease-out}.header-key[data-v-7227aa88]{color:var(--qv-key);font-weight:500;min-width:150px;flex-shrink:0}.header-value[data-v-7227aa88]{color:var(--qv-text-muted);word-break:break-all}.body-content[data-v-7227aa88]{background:var(--qv-bg-hover)}.body-view[data-v-7227aa88]{padding:12px;max-height:400px;overflow:auto}.raw-body[data-v-7227aa88]{margin:0;font-size:12px;white-space:pre-wrap;word-break:break-word;color:var(--qv-text)}.timing-content[data-v-7227aa88]{padding:12px;background:var(--qv-bg-hover)}.timing-bar[data-v-7227aa88]{display:flex;height:8px;border-radius:4px;overflow:hidden;background:#e2e8f0}.timing-phase[data-v-7227aa88]{height:100%;min-width:2px}.timing-legend[data-v-7227aa88]{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}.timing-item[data-v-7227aa88]{display:flex;align-items:center;gap:6px;font-size:11px}.timing-dot[data-v-7227aa88]{width:8px;height:8px;border-radius:50%}.timing-label[data-v-7227aa88]{color:var(--qv-text-muted);text-transform:capitalize}.timing-value[data-v-7227aa88]{color:var(--qv-text);font-weight:500}@keyframes highlight-pulse-7227aa88{0%{background-color:#6366f14d}50%{background-color:#6366f126}to{background-color:transparent}}.qv-file-object[data-v-8c9554b5]{border:1px solid var(--qv-border);border-radius:8px;overflow:hidden;background:var(--qv-bg)}.file-card[data-v-8c9554b5]{display:flex;align-items:center;gap:12px;padding:12px}.file-preview[data-v-8c9554b5]{width:56px;height:56px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#f1f5f9;color:#64748b}.file-preview.image[data-v-8c9554b5]{background:#faf5ff;color:#7c3aed;padding:0;overflow:hidden}.file-preview.text[data-v-8c9554b5]{background:#eff6ff;color:#3b82f6}.file-preview.json[data-v-8c9554b5]{background:#fff7ed;color:#ea580c}.image-preview[data-v-8c9554b5]{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:transform .2s ease}.image-preview[data-v-8c9554b5]:hover{transform:scale(1.05)}.file-info[data-v-8c9554b5]{flex:1;min-width:0}.file-name[data-v-8c9554b5]{font-weight:600;color:var(--qv-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px}.file-meta[data-v-8c9554b5]{display:flex;align-items:center;gap:8px;margin-bottom:4px}.file-size[data-v-8c9554b5]{color:var(--qv-text-subtle);font-size:12px}.file-url[data-v-8c9554b5]{color:var(--qv-text-muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-actions[data-v-8c9554b5]{display:flex;gap:4px;flex-shrink:0}.file-content-preview[data-v-8c9554b5]{border-top:1px solid var(--qv-border);background:var(--qv-bg-hover)}.content-header[data-v-8c9554b5]{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:12px;font-weight:500;color:var(--qv-text-muted);border-bottom:1px solid var(--qv-border)}.content-body[data-v-8c9554b5]{margin:0;padding:12px;font-size:12px;max-height:200px;overflow:auto;white-space:pre-wrap;word-break:break-word}.image-dialog[data-v-8c9554b5]{max-width:90vw;max-height:90vh}.full-image[data-v-8c9554b5]{max-width:100%;max-height:70vh;object-fit:contain}.qv-error-object[data-v-3f124526]{border:1px solid #fecaca;border-radius:8px;background:#fef2f2;overflow:hidden}.error-header[data-v-3f124526]{display:flex;align-items:flex-start;gap:10px;padding:12px}.error-message[data-v-3f124526]{color:#991b1b;font-weight:500;line-height:1.4;flex:1}.error-code[data-v-3f124526]{padding:0 12px 12px;font-size:12px;color:#7f1d1d}.stack-header[data-v-3f124526],.details-header[data-v-3f124526]{font-size:12px;color:#991b1b;background:#fee2e2;padding:8px 12px!important;min-height:auto!important}.stack-trace[data-v-3f124526]{margin:0;padding:12px;font-size:11px;background:#fff5f5;color:#7f1d1d;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow:auto}.error-details[data-v-3f124526]{padding:12px;background:#fff5f5}.qv-error-object.is-highlighted[data-v-3f124526]{animation:highlight-pulse-3f124526 2s ease-out}@keyframes highlight-pulse-3f124526{0%{background-color:#6366f14d}50%{background-color:#6366f126}to{background-color:#fef2f2}}.quickview[data-v-2a61925b]{position:relative;display:flex;flex-direction:column;min-height:100px}.qv-toolbar[data-v-2a61925b]{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--qv-border);background:var(--qv-bg-hover);gap:8px 12px;flex-wrap:wrap}.toolbar-left[data-v-2a61925b]{display:flex;align-items:center;gap:8px;flex:1 1 200px;min-width:120px}.toolbar-right[data-v-2a61925b]{display:flex;align-items:center;gap:4px;flex-shrink:0}.search-container[data-v-2a61925b]{position:relative;flex:1;min-width:120px}.search-input[data-v-2a61925b]{width:100%}.search-input [data-v-2a61925b] .q-field__control{height:32px}.qv-content[data-v-2a61925b]{flex:1;overflow:auto;padding:12px}.search-results[data-v-2a61925b]{position:absolute;top:100%;left:0;width:350px;max-height:320px;background:#fff;border:1px solid var(--qv-border);border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;overflow:hidden;margin-top:4px}.search-results-header[data-v-2a61925b]{padding:8px 12px;font-size:12px;color:var(--qv-text-muted);background:var(--qv-bg-hover);border-bottom:1px solid var(--qv-border);display:flex;align-items:center;gap:8px}.results-note[data-v-2a61925b]{color:var(--qv-text-subtle);font-size:11px}.search-results-list[data-v-2a61925b]{max-height:270px;overflow:auto}.search-result-item[data-v-2a61925b]{display:flex;flex-direction:column;gap:2px;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--qv-border)}.search-result-item[data-v-2a61925b]:last-child{border-bottom:none}.search-result-item[data-v-2a61925b]:hover,.search-result-item.selected[data-v-2a61925b]{background:var(--qv-bg-selected)}.result-path[data-v-2a61925b]{font-size:12px;color:var(--qv-info);font-weight:500;font-family:var(--qv-mono)}.result-preview[data-v-2a61925b]{font-size:11px;color:var(--qv-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}