@legionworks/facet 1.9.0

package/dist/gallery/chunk-4g8rem85.css

@@ -0,0 +1,656 @@
+/* src/gallery-web/styles/tokens.css */
+:root {
+  --facet-cyan: #86e1fc;
+  --facet-amber: #ff966c;
+  --facet-navy: #16161e;
+  --facet-navy-2: #1d1d27;
+  --facet-navy-3: #232330;
+  --facet-ink: #e9eaf0;
+  --facet-ink-dim: #b6b7c2;
+  --facet-ink-faint: #a6a8b5;
+  --facet-rule: #2e2e3a;
+  --facet-error: #ff6e6e;
+  --facet-surface: var(--facet-navy);
+  --facet-surface-raised: var(--facet-navy-2);
+  --facet-surface-stage: #101018;
+  --facet-surface-control: var(--facet-navy-3);
+  --facet-text: var(--facet-ink);
+  --facet-text-muted: var(--facet-ink-dim);
+  --facet-text-faint: var(--facet-ink-faint);
+  --facet-rule-semantic: var(--facet-rule);
+  --facet-focus: var(--facet-cyan);
+  --facet-link: var(--facet-cyan);
+  --facet-shadow-export: #00000047;
+  --facet-live-ok: #c3e88d;
+  --facet-live-partial: #ffc777;
+  --facet-ok: #c3e88d;
+  --facet-fail: #ff757f;
+  --facet-partial: #ffc777;
+  --facet-inert: #a9b8e8;
+  --facet-tamper-ink: #16161e;
+  --facet-ok-border: color-mix(in srgb, var(--facet-ok) 45%, transparent);
+  --facet-ok-fill: transparent;
+  --facet-fail-border: color-mix(in srgb, var(--facet-fail) 45%, transparent);
+  --facet-fail-fill: transparent;
+  --facet-partial-border: color-mix(in srgb, var(--facet-partial) 45%, transparent);
+  --facet-partial-fill: transparent;
+  --facet-inert-border: color-mix(in srgb, var(--facet-inert) 38%, transparent);
+  --facet-inert-fill: transparent;
+  --facet-glow-danger: 0 0 0 1px color-mix(in srgb, var(--facet-fail) 40%, transparent), 0 8px 32px -8px color-mix(in srgb, var(--facet-fail) 55%, transparent);
+  --facet-tier-border: color-mix(in srgb, var(--facet-ink) 28%, transparent);
+  --facet-tier-fill: color-mix(in srgb, var(--facet-ink) 6%, transparent);
+  --facet-tier-strong-border: color-mix(in srgb, var(--facet-cyan) 45%, transparent);
+  --facet-tier-strong-fill: color-mix(in srgb, var(--facet-cyan) 8%, transparent);
+  --facet-space-1: 4px;
+  --facet-space-2: 8px;
+  --facet-space-3: 12px;
+  --facet-space-4: 16px;
+  --facet-space-5: 24px;
+  --facet-space-6: 32px;
+  --facet-radius-1: 4px;
+  --facet-radius-2: 8px;
+  --facet-font-sans: "Space Grotesk", "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --facet-font-mono: "JetBrains Mono", "Geist Mono", "SF Mono", "Menlo", "Consolas", monospace;
+}
+
+[data-theme="light"] {
+  --buncss-light: initial;
+  --buncss-dark: ;
+  color-scheme: light;
+  --facet-cyan: #075985;
+  --facet-amber: #9a3412;
+  --facet-navy: #f8fafc;
+  --facet-navy-2: #fff;
+  --facet-navy-3: #e2e8f0;
+  --facet-ink: #172033;
+  --facet-ink-dim: #334155;
+  --facet-ink-faint: #475569;
+  --facet-rule: #cbd5e1;
+  --facet-error: #b91c1c;
+  --facet-surface-stage: #f1f5f9;
+  --facet-focus: #075985;
+  --facet-link: #075985;
+  --facet-shadow-export: #0f172a33;
+  --facet-live-ok: #166534;
+  --facet-live-partial: #9a3412;
+  --facet-ok: #166534;
+  --facet-fail: #b91c1c;
+  --facet-partial: #9a3412;
+  --facet-inert: #475569;
+  --facet-tamper-ink: #fff;
+  --facet-ok-border: color-mix(in srgb, var(--facet-ok) 50%, transparent);
+  --facet-fail-border: color-mix(in srgb, var(--facet-fail) 50%, transparent);
+  --facet-partial-border: color-mix(in srgb, var(--facet-partial) 50%, transparent);
+  --facet-inert-border: color-mix(in srgb, var(--facet-inert) 45%, transparent);
+  --facet-tier-border: color-mix(in srgb, var(--facet-inert) 45%, transparent);
+  --facet-tier-fill: color-mix(in srgb, var(--facet-inert) 8%, transparent);
+  --facet-tier-strong-border: color-mix(in srgb, var(--facet-cyan) 50%, transparent);
+  --facet-tier-strong-fill: color-mix(in srgb, var(--facet-cyan) 8%, transparent);
+  --facet-glow-danger: 0 0 0 1px color-mix(in srgb, var(--facet-fail) 35%, transparent), 0 8px 32px -8px color-mix(in srgb, var(--facet-fail) 25%, transparent);
+}
+
+/* src/gallery-web/styles/verdict.css */
+.facet-verdict {
+  display: inline-flex;
+  border: 1px solid var(--facet-inert-border);
+  background: var(--facet-inert-fill);
+  color: var(--facet-inert);
+  font-family: var(--facet-font-mono);
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  border-radius: 999px;
+  align-items:  center;
+  gap: 7px;
+  height: 24px;
+  padding: 0 11px;
+  font-size: 10.5px;
+  font-weight: 600;
+}
+
+.facet-verdict:before {
+  letter-spacing: 0;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.facet-verdict .tier {
+  opacity: .62;
+  font-weight: 500;
+}
+
+.facet-verdict--sm {
+  gap: 6px;
+  height: 20px;
+  padding: 0 9px;
+  font-size: 10px;
+}
+
+.facet-verdict[data-status="ok"] {
+  border-color: var(--facet-ok-border);
+  background: var(--facet-ok-fill);
+  color: var(--facet-ok);
+}
+
+.facet-verdict[data-status="ok"]:before {
+  content: "✓";
+}
+
+.facet-verdict[data-status="error"] {
+  border-color: var(--facet-fail-border);
+  background: var(--facet-fail-fill);
+  color: var(--facet-fail);
+}
+
+.facet-verdict[data-status="error"]:before {
+  content: "✗";
+}
+
+.facet-verdict[data-status="partial:layout_unverified"] {
+  border-color: var(--facet-partial-border);
+  background: var(--facet-partial-fill);
+  color: var(--facet-partial);
+}
+
+.facet-verdict[data-status="partial:layout_unverified"]:before {
+  content: "◐";
+}
+
+.facet-verdict[data-status="partial:opaque_content"] {
+  border-color: var(--facet-partial-border);
+  background: var(--facet-partial-fill);
+  color: var(--facet-partial);
+}
+
+.facet-verdict[data-status="partial:opaque_content"]:before {
+  content: "◐";
+}
+
+.facet-verdict[data-status="partial:external_resources"] {
+  border-color: var(--facet-partial-border);
+  background: var(--facet-partial-fill);
+  color: var(--facet-partial);
+}
+
+.facet-verdict[data-status="partial:external_resources"]:before {
+  content: "◐";
+}
+
+.facet-verdict[data-status="partial:unstable"] {
+  border-color: var(--facet-partial-border);
+  background: var(--facet-partial-fill);
+  color: var(--facet-partial);
+}
+
+.facet-verdict[data-status="partial:unstable"]:before {
+  content: "◐";
+}
+
+.facet-verdict[data-status="tampered"], .facet-verdict[data-status="insecure:unvalidated"] {
+  border-color: var(--facet-fail);
+  background: var(--facet-fail);
+  color: var(--facet-tamper-ink);
+  box-shadow: var(--facet-glow-danger);
+  font-weight: 700;
+}
+
+.facet-verdict[data-status="tampered"]:before, .facet-verdict[data-status="tampered"]:before, .facet-verdict[data-status="insecure:unvalidated"]:before {
+  content: "⊘";
+}
+
+.facet-verdict[data-status="timeout"]:before {
+  content: "◌";
+}
+
+.facet-verdict[data-status="shim_only"]:before {
+  content: "◇";
+}
+
+.facet-verdict[data-status="probe_only"]:before {
+  content: "◈";
+}
+
+.facet-verdict[data-status="unverified"] {
+  background: none;
+  border-style: dashed;
+}
+
+.facet-verdict[data-status="unverified"]:before {
+  content: "◌";
+}
+
+.facet-tier {
+  display: inline-flex;
+  border: 1px solid var(--facet-tier-border);
+  background: var(--facet-tier-fill);
+  color: var(--facet-text);
+  font-family: var(--facet-font-mono);
+  letter-spacing: .1em;
+  border-radius: 6px;
+  align-items:  center;
+  gap: 8px;
+  height: 24px;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.facet-tier span {
+  opacity: .75;
+  font-weight: 500;
+}
+
+.facet-tier[data-tier="1"] {
+  border-color: var(--facet-tier-strong-border);
+  background: var(--facet-tier-strong-fill);
+  color: var(--facet-focus);
+}
+
+.facet-tier[data-tier="2"] {
+  color: var(--facet-inert);
+  background: none;
+  border-style: dashed;
+}
+
+.facet-channels {
+  font-family: var(--facet-font-mono);
+  letter-spacing: 4px;
+  color: var(--facet-ink-dim);
+}
+
+.facet-channels[data-agree="true"] {
+  color: var(--facet-ok);
+}
+
+.facet-channels[data-agree="false"] {
+  color: var(--facet-fail);
+}
+
+/* src/gallery-web/styles/app.css */
+body {
+  background: var(--facet-surface);
+  color: var(--facet-text);
+  font-family: var(--facet-font-sans);
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+#facet-shell {
+  display: grid;
+  grid-template-rows: auto auto 1fr auto;
+  min-height: 100vh;
+}
+
+#facet-status {
+  display: flex;
+  border-bottom: 1px solid var(--facet-rule-semantic);
+  background: var(--facet-surface-raised);
+  align-items:  center;
+  gap: 14px;
+  height: 52px;
+  padding: 0 20px;
+}
+
+#facet-mark {
+  color: var(--facet-cyan);
+  font-size: 13px;
+  transform: translateY(-.5px);
+}
+
+#facet-status .title {
+  color: var(--facet-text);
+  font-weight: 600;
+}
+
+#facet-status .sep {
+  background: var(--facet-rule-semantic);
+  width: 1px;
+  height: 18px;
+}
+
+#facet-artifact-title {
+  color: var(--facet-text-muted);
+  font-size: 13px;
+}
+
+#facet-artifact-title:empty {
+  display: none;
+}
+
+#facet-status .revision {
+  font-family: var(--facet-font-mono);
+  color: var(--facet-cyan);
+  font-size: 11.5px;
+}
+
+#facet-status .status-line {
+  color: var(--facet-text-faint);
+  font-family: var(--facet-font-mono);
+  margin-left: auto;
+  font-size: 11px;
+}
+
+#facet-status .status-line:after {
+  content: " · T2";
+  opacity: .6;
+}
+
+#facet-evidence {
+  display: flex;
+  background: var(--facet-surface-raised);
+  border-bottom: 1px solid var(--facet-rule-semantic);
+  font-family: var(--facet-font-mono);
+  color: var(--facet-text-muted);
+  align-items:  center;
+  gap: 22px;
+  padding: 9px 20px;
+  font-size: 11.5px;
+}
+
+#facet-evidence[hidden] {
+  display: none;
+}
+
+#facet-evidence .label {
+  color: var(--facet-text-faint);
+  letter-spacing: .1em;
+  font-size: 10px;
+}
+
+#facet-evidence .sha {
+  color: var(--facet-cyan);
+}
+
+#facet-evidence .divergence {
+  color: var(--facet-error);
+}
+
+#facet-evidence .binding {
+  color: var(--facet-text-faint);
+  margin-left: auto;
+}
+
+#facet-canvas {
+  position: relative;
+  overflow: hidden;
+  background: var(--facet-surface-stage);
+  box-sizing: border-box;
+  padding-bottom: 44px;
+}
+
+#facet-swapbar {
+  position: absolute;
+  background: color-mix(in srgb, var(--facet-focus) 12%, transparent);
+  height: 2px;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+#facet-swapbar[hidden] {
+  display: none;
+}
+
+#facet-swapbar .bar {
+  background: var(--facet-cyan);
+  width: 34%;
+  height: 100%;
+  transition: width .2s ease-out;
+}
+
+#facet-swapbar[data-failed] .bar {
+  background: var(--facet-error);
+}
+
+#facet-empty {
+  display: flex;
+  text-align: center;
+  flex-direction: column;
+  align-items:  center;
+  gap: 14px;
+}
+
+#facet-empty[hidden] {
+  display: none;
+}
+
+#facet-empty .glyph {
+  color: var(--facet-text-faint);
+  font-size: 26px;
+}
+
+#facet-empty .head {
+  color: var(--facet-text);
+  font-size: 15px;
+  font-weight: 600;
+}
+
+#facet-empty .sub {
+  color: var(--facet-text-faint);
+  font-size: 13px;
+}
+
+#facet-empty .cmd {
+  font-family: var(--facet-font-mono);
+  color: var(--facet-text-muted);
+  background: var(--facet-surface);
+  border: 1px solid var(--facet-rule-semantic);
+  border-radius: 6px;
+  padding: 8px 14px;
+  font-size: 12px;
+}
+
+#facet-empty .cmd .p {
+  color: var(--facet-text-faint);
+}
+
+#facet-expired {
+  display: flex;
+  text-align: center;
+  flex-direction: column;
+  align-items:  center;
+  gap: 14px;
+}
+
+#facet-expired[hidden] {
+  display: none;
+}
+
+#facet-expired .glyph {
+  color: var(--facet-error);
+  font-size: 26px;
+}
+
+#facet-expired .head {
+  color: var(--facet-text);
+  font-size: 15px;
+  font-weight: 600;
+}
+
+#facet-expired .sub {
+  color: var(--facet-text-faint);
+  font-size: 13px;
+}
+
+#facet-expired .cmd {
+  font-family: var(--facet-font-mono);
+  color: var(--facet-text-muted);
+  background: var(--facet-surface);
+  border: 1px solid var(--facet-rule-semantic);
+  border-radius: 6px;
+  padding: 8px 14px;
+  font-size: 12px;
+}
+
+#facet-expired .cmd .p {
+  color: var(--facet-text-faint);
+}
+
+#facet-canvas iframe {
+  background: var(--facet-surface);
+  transform-origin: center center;
+  border: 0;
+  transition: transform .12s ease-out, opacity .12s linear;
+}
+
+#facet-canvas iframe.facet-hidden {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  border: 0;
+  width: 0;
+  height: 0;
+}
+
+#facet-canvas iframe.facet-ready {
+  display: block;
+  opacity: 1;
+  width: 100%;
+  height: 100%;
+}
+
+#facet-controls {
+  position: fixed;
+  z-index: 5;
+  display: flex;
+  border-top: 1px solid var(--facet-rule-semantic);
+  background: var(--facet-surface-raised);
+  align-items:  center;
+  gap: 8px;
+  height: 44px;
+  padding: 0 20px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+#facet-live {
+  display: inline-flex;
+  font-family: var(--facet-font-mono);
+  color: var(--facet-text-faint);
+  align-items:  center;
+  gap: 7px;
+  font-size: 11px;
+}
+
+#facet-live .dot {
+  color: var(--facet-text-faint);
+  font-size: 9px;
+}
+
+#facet-live[data-state="live"] .dot {
+  color: var(--facet-live-ok);
+}
+
+#facet-live[data-state="connecting"] .dot {
+  color: var(--facet-live-partial);
+}
+
+#facet-controls .spacer {
+  margin-left: auto;
+}
+
+#facet-controls button {
+  display: grid;
+  background: var(--facet-surface-control);
+  color: var(--facet-text);
+  border: 1px solid var(--facet-rule-semantic);
+  font-family: var(--facet-font-mono);
+  cursor: pointer;
+  border-radius: 6px;
+  place-items:  center;
+  min-width: 28px;
+  height: 28px;
+  padding: 0 10px;
+  transition: border-color .12s ease-out, color .12s ease-out;
+  font-size: 11.5px;
+}
+
+#facet-controls button:hover {
+  border-color: color-mix(in srgb, var(--facet-focus) 48%, transparent);
+  color: var(--facet-focus);
+}
+
+#facet-controls button:focus-visible {
+  outline: 2px solid var(--facet-focus);
+  outline-offset: 2px;
+}
+
+#facet-controls button:active {
+  transform: scale(.98);
+}
+
+#facet-controls button:disabled {
+  opacity: .4;
+  cursor: default;
+  color: var(--facet-text-faint);
+}
+
+#facet-controls button:disabled:hover {
+  border-color: var(--facet-rule-semantic);
+  color: var(--facet-text-faint);
+}
+
+#facet-controls button[aria-pressed="true"] {
+  background: var(--facet-focus);
+  color: var(--facet-surface-raised);
+  border-color: var(--facet-focus);
+}
+
+.facet-export {
+  position: relative;
+}
+
+#facet-export-menu {
+  position: absolute;
+  z-index: 6;
+  display: grid;
+  border: 1px solid var(--facet-rule-semantic);
+  background: var(--facet-surface-raised);
+  box-shadow: 0 8px 24px var(--facet-shadow-export);
+  border-radius: 6px;
+  gap: 4px;
+  min-width: 120px;
+  padding: 6px;
+  bottom: 36px;
+  right: 0;
+}
+
+#facet-export-menu[hidden] {
+  display: none;
+}
+
+#facet-export-menu button {
+  justify-content: start;
+  width: 100%;
+}
+
+#facet-error {
+  display: none;
+  border: 1px solid var(--facet-fail-border);
+  background: var(--facet-fail-fill);
+  color: var(--facet-error);
+  font-family: var(--facet-font-mono);
+  border-radius: 999px;
+  align-items:  center;
+  gap: 7px;
+  height: 24px;
+  margin-left: 10px;
+  padding: 0 11px;
+  font-size: 11px;
+}
+
+#facet-error:before {
+  content: "✗";
+}
+
+#facet-error.facet-visible {
+  display: inline-flex;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #facet-canvas iframe, #facet-swapbar .bar, #facet-controls button {
+    transition: none;
+  }
+}