@pipelex/mthds-ui 0.19.0 → 0.20.0

package/dist/graph/react/stuff/StuffViewer.css

@@ -1,346 +0,0 @@
-/* ─── StuffViewer component styles ────────────────────────────────────────── */
-/* StuffViewer is also exported standalone (used outside GraphViewer — e.g.
- * docs pages, embedded previews). The theme tokens are normally applied to
- * the GraphViewer container, but when this component is rendered on its own
- * those tokens may not be set. The fallbacks below match the dark palette
- * from `graphConfig.ts` (DARK_PALETTE_COLORS) so the component always
- * renders with valid colors and fonts. */
-
-.stuff-viewer {
-  --sv-bg: var(--surface-page, #0a0a0a);
-  --sv-surface: var(--surface-panel, #111118);
-  --sv-surface-hover: var(--surface-elevated, rgba(255, 255, 255, 0.06));
-  --sv-border: var(--border-default, rgba(255, 255, 255, 0.1));
-  --sv-text: var(--text-default, #e2e8f0);
-  --sv-text-muted: var(--text-muted, #94a3b8);
-  --sv-accent: var(--color-accent, #8be9fd);
-  --sv-success: var(--color-success, #50fa7b);
-  --sv-success-bg: var(--color-success-bg, rgba(80, 250, 123, 0.15));
-  --sv-radius: 4px;
-  --sv-font-sans: var(
-    --font-sans,
-    "Inter",
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif
-  );
-  --sv-font-mono: var(--font-mono, "JetBrains Mono", "Monaco", "Menlo", monospace);
-
-  font-family: var(--sv-font-sans);
-  color: var(--sv-text);
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-/* ─── Header ─────────────────────────────────────────────────────────────── */
-
-.stuff-viewer-header {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 12px 16px 8px;
-  border-bottom: 1px solid var(--sv-border);
-  flex-shrink: 0;
-}
-
-.stuff-viewer-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--sv-text);
-  margin: 0;
-}
-
-.stuff-viewer-subtitle {
-  font-size: 12px;
-  color: var(--sv-text-muted);
-  margin: 0;
-}
-
-/* ─── Toolbar: tabs + action buttons ─────────────────────────────────────── */
-
-.stuff-viewer-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 16px;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-.stuff-viewer-tabs {
-  display: flex;
-  gap: 4px;
-}
-
-.stuff-viewer-tab {
-  padding: 5px 10px;
-  border-radius: var(--sv-radius);
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 500;
-  background: var(--sv-surface-hover);
-  color: var(--sv-text-muted);
-  border: none;
-  transition:
-    background 0.15s,
-    color 0.15s;
-}
-
-.stuff-viewer-tab:hover {
-  background: var(--sv-border);
-  color: var(--sv-text);
-}
-
-.stuff-viewer-tab--active {
-  background: var(--sv-accent);
-  color: var(--text-on-accent, #0e0e0e);
-}
-
-/* ─── Action buttons ─────────────────────────────────────────────────────── */
-
-.stuff-viewer-actions {
-  display: flex;
-  gap: 4px;
-}
-
-.stuff-viewer-action-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: var(--sv-radius);
-  cursor: pointer;
-  background: var(--sv-surface-hover);
-  color: var(--sv-text-muted);
-  border: none;
-  transition:
-    background 0.15s,
-    color 0.15s;
-}
-
-.stuff-viewer-action-btn:hover {
-  background: var(--sv-border);
-  color: var(--sv-text);
-}
-
-.stuff-viewer-action-btn--copied {
-  background: var(--sv-success-bg);
-  color: var(--sv-success);
-}
-
-.stuff-viewer-action-btn svg {
-  width: 14px;
-  height: 14px;
-  fill: currentColor;
-}
-
-/* ─── Content area ───────────────────────────────────────────────────────── */
-
-.stuff-viewer-content {
-  flex: 1;
-  overflow: auto;
-  padding: 12px 16px 16px;
-  min-height: 0;
-}
-
-/* Pre-formatted text (JSON and Pretty tabs) */
-.stuff-viewer-pre {
-  font-family: var(--sv-font-mono);
-  font-size: 11px;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  margin: 0;
-  color: var(--sv-text-muted);
-}
-
-.stuff-viewer-pre--nowrap {
-  white-space: pre;
-  word-wrap: normal;
-  line-height: 1;
-  overflow-x: auto;
-  padding-right: 20px;
-}
-
-/* HTML content */
-.stuff-viewer-html {
-  font-family: var(--sv-font-sans);
-  font-size: 11px;
-  color: var(--sv-text-muted);
-  line-height: 1.5;
-}
-
-.stuff-viewer-html table {
-  border-collapse: collapse;
-  width: 100%;
-}
-
-.stuff-viewer-html th,
-.stuff-viewer-html td {
-  border: 1px solid var(--sv-border);
-  padding: 8px 12px;
-  text-align: left;
-}
-
-.stuff-viewer-html th {
-  background: var(--sv-surface-hover);
-  color: var(--sv-text);
-  font-weight: 600;
-}
-
-.stuff-viewer-html tr:hover {
-  background: var(--sv-surface-hover);
-}
-
-.stuff-viewer-html a {
-  color: var(--sv-accent);
-  text-decoration: none;
-}
-
-.stuff-viewer-html a:hover {
-  text-decoration: underline;
-}
-
-.stuff-viewer-html ul {
-  list-style: none;
-  padding-left: 0;
-  margin: 0;
-}
-
-/* Native `Html` concept — rendered in a sandboxed iframe so the document's own
-   <style>/layout is faithful and isolated from the host. White backdrop because
-   these documents (invoices, quotes, reports) are authored for print/light. */
-.stuff-viewer-html-frame {
-  width: 100%;
-  height: 100%;
-  min-height: 480px;
-  border: none;
-  border-radius: var(--sv-radius);
-  background: #fff;
-}
-
-/* PDF embed */
-.stuff-viewer-pdf {
-  min-height: 400px;
-  height: 100%;
-}
-
-.stuff-viewer-pdf embed {
-  width: 100%;
-  height: 100%;
-  min-height: 500px;
-  border: none;
-}
-
-/* Image content */
-.stuff-viewer-image {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 200px;
-}
-
-.stuff-viewer-image img {
-  max-width: 100%;
-  max-height: 70vh;
-  object-fit: contain;
-}
-
-/* Local file fallback (file:// URLs that can't render inline) */
-.stuff-viewer-local-file {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px;
-  border-radius: 6px;
-  background: var(--sv-surface);
-  border: 1px solid var(--sv-border);
-}
-
-/* Clickable variant — used when an open-externally action is bound (e.g. PDF
-   fallback in hosts that can't render <embed type="application/pdf">). */
-button.stuff-viewer-local-file--button {
-  width: 100%;
-  text-align: left;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  transition:
-    background 0.15s ease,
-    border-color 0.15s ease;
-}
-
-button.stuff-viewer-local-file--button:hover {
-  background: var(--sv-surface-hover, var(--sv-surface));
-  border-color: var(--sv-accent, var(--sv-border));
-}
-
-button.stuff-viewer-local-file--button:focus-visible {
-  outline: 2px solid var(--sv-accent, var(--sv-border));
-  outline-offset: 2px;
-}
-
-.stuff-viewer-local-file-icon {
-  flex-shrink: 0;
-  width: 32px;
-  height: 32px;
-  color: var(--sv-text-muted);
-}
-
-.stuff-viewer-local-file-icon svg {
-  width: 100%;
-  height: 100%;
-  fill: currentColor;
-}
-
-.stuff-viewer-local-file-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.stuff-viewer-local-file-name {
-  font-family: var(--sv-font-mono);
-  font-size: 12px;
-  color: var(--sv-text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.stuff-viewer-local-file-hint {
-  font-size: 11px;
-  color: var(--sv-text-muted);
-  margin-top: 2px;
-}
-
-/* Placeholder for missing data */
-.stuff-viewer-placeholder {
-  color: var(--sv-text-muted);
-  font-style: italic;
-  font-size: 13px;
-}
-
-.stuff-viewer-error {
-  border: 1px solid var(--color-status-failed, #ff5555);
-  border-radius: 6px;
-  padding: 12px;
-  background: rgba(255, 85, 85, 0.08);
-}
-
-.stuff-viewer-error-title {
-  color: var(--color-status-failed, #ff5555);
-  font-weight: 600;
-  font-size: 13px;
-  margin-bottom: 4px;
-}
-
-.stuff-viewer-error-detail {
-  color: var(--sv-text-muted);
-  font-family: var(--font-mono, monospace);
-  font-size: 12px;
-  white-space: pre-wrap;
-  word-break: break-word;
-}