Initial commit

src/components/gump/GumpPreview.module.css

@@ -0,0 +1,84 @@
+.preview {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 16px;
+  gap: 12px;
+  overflow-y: auto;
+}
+
+.header {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  border-bottom: 1px solid var(--border-accent);
+  padding-bottom: 8px;
+}
+
+.name {
+  font-family: 'Cinzel', serif;
+  font-size: 16px;
+  color: var(--text-primary);
+}
+
+.id {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 12px;
+  color: var(--accent-gold);
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.tag {
+  font-family: 'Cinzel', serif;
+  font-size: 10px;
+  color: var(--text-secondary);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 2px 7px;
+}
+
+.canvasWrap {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  min-height: 80px;
+  background: var(--bg-base);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.loading {
+  color: var(--text-secondary);
+  font-family: 'Cinzel', serif;
+  font-size: 12px;
+  padding: 8px;
+}
+
+.noArt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 16px;
+  color: var(--text-muted);
+  font-size: 12px;
+  font-family: 'Cinzel', serif;
+}
+
+.artCanvas {
+  image-rendering: pixelated;
+  max-width: 100%;
+}
+
+.meta {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 11px;
+  color: var(--text-muted);
+}