@amulet-laboratories/hex 0.3.0 → 0.5.1

package/src/shared/components/data.css

@@ -1,21 +1,13 @@
-/* Hex — Shared Data Components
- * Styles for Rig's data package: Sparkline, MiniBar, StatCard,
- * BarChart, LineChart, AreaChart, ScatterPlot, Heatmap,
- * RadarChart, Treemap, SankeyDiagram
+/* Hex — Shared Data Components (skin only)
+ * Colors, fills, strokes, backgrounds, shadows, font-family, opacity, transitions.
+ * Structural layout lives in Rig/src/styles/data.css.
  */
 
 /* ───────── Sparkline ───────── */
 
-[data-rig-sparkline] {
-  @apply inline-flex items-center;
-}
-
 [data-rig-sparkline-line] {
   fill: none;
   stroke: var(--domain-accent, var(--color-primary));
-  stroke-width: 1.5;
-  stroke-linecap: round;
-  stroke-linejoin: round;
 }
 
 [data-rig-sparkline-area] {
@@ -25,10 +17,6 @@
 
 /* ───────── MiniBar ───────── */
 
-[data-rig-mini-bar] {
-  @apply inline-flex items-end gap-px;
-}
-
 [data-rig-mini-bar-rect] {
   fill: var(--domain-accent, var(--color-primary));
   opacity: 0.7;
@@ -42,28 +30,21 @@
 /* ───────── StatCard ───────── */
 
 [data-rig-stat-card] {
-  @apply bg-card text-card-foreground border border-border/50;
+  @apply bg-card text-card-foreground;
   border-radius: var(--radius);
-}
-
-[data-rig-stat-card-header] {
-  @apply flex items-center justify-between;
+  border-color: color-mix(in srgb, var(--color-border) 50%, transparent);
 }
 
 [data-rig-stat-card-label] {
-  @apply text-xs text-muted-foreground font-mono uppercase tracking-wider;
+  @apply text-muted-foreground font-mono;
 }
 
 [data-rig-stat-card-value] {
-  @apply text-2xl font-mono font-bold;
-}
-
-[data-rig-stat-card-footer] {
-  @apply flex items-center gap-2;
+  @apply font-mono;
 }
 
 [data-rig-stat-card-trend] {
-  @apply text-xs font-mono;
+  @apply font-mono;
 }
 
 [data-rig-stat-card-trend][data-trend='up'] {
@@ -75,7 +56,7 @@
 }
 
 [data-rig-stat-card-description] {
-  @apply text-xs text-muted-foreground;
+  @apply text-muted-foreground;
 }
 
 /* ───────── BarChart ───────── */
@@ -84,14 +65,6 @@
   @apply text-foreground;
 }
 
-[data-rig-bar-chart-bars] {
-  /* Container group — no direct styling needed */
-}
-
-[data-rig-bar-chart-bar-group] {
-  cursor: pointer;
-}
-
 [data-rig-bar-chart-bar] {
   fill: var(--domain-accent, var(--color-primary));
   opacity: 0.8;
@@ -104,12 +77,12 @@
 
 [data-rig-bar-chart-label] {
   fill: var(--color-muted-foreground);
-  @apply font-mono text-xs;
+  @apply font-mono;
 }
 
 [data-rig-bar-chart-value] {
   fill: var(--color-muted-foreground);
-  @apply font-mono text-xs;
+  @apply font-mono;
 }
 
 /* ───────── LineChart ───────── */
@@ -118,35 +91,23 @@
   @apply text-foreground;
 }
 
-[data-rig-line-chart-series] {
-  /* Series group — no direct styling needed */
-}
-
 [data-rig-line-chart-line] {
   fill: none;
   stroke: var(--domain-accent, var(--color-primary));
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
 }
 
 [data-rig-line-chart-dot] {
   fill: var(--domain-accent, var(--color-primary));
   transition: r 0.15s ease;
-  cursor: pointer;
 }
 
 [data-rig-line-chart-dot]:hover {
   r: 5;
 }
 
-[data-rig-line-chart-labels] {
-  /* Label group — no direct styling needed */
-}
-
 [data-rig-line-chart-label] {
   fill: var(--color-muted-foreground);
-  @apply font-mono text-xs;
+  @apply font-mono;
 }
 
 /* ───────── AreaChart ───────── */
@@ -155,10 +116,6 @@
   @apply text-foreground;
 }
 
-[data-rig-area-chart-series] {
-  /* Series group — no direct styling needed */
-}
-
 [data-rig-area-chart-fill] {
   fill: var(--domain-accent, var(--color-primary));
   opacity: 0.15;
@@ -167,16 +124,11 @@
 [data-rig-area-chart-line] {
   fill: none;
   stroke: var(--domain-accent, var(--color-primary));
-  stroke-width: 2;
-}
-
-[data-rig-area-chart-labels] {
-  /* Label group — no direct styling needed */
 }
 
 [data-rig-area-chart-label] {
   fill: var(--color-muted-foreground);
-  @apply font-mono text-xs;
+  @apply font-mono;
 }
 
 /* ───────── ScatterPlot ───────── */
@@ -191,7 +143,6 @@
   transition:
     opacity 0.15s ease,
     r 0.15s ease;
-  cursor: pointer;
 }
 
 [data-rig-scatter-plot-point]:hover {
@@ -200,7 +151,7 @@
 
 [data-rig-scatter-plot] text {
   fill: var(--color-muted-foreground);
-  @apply font-mono text-xs;
+  @apply font-mono;
 }
 
 /* ───────── Heatmap ───────── */
@@ -209,29 +160,15 @@
   @apply text-foreground;
 }
 
-[data-rig-heatmap-col-labels] {
-  /* Column label group — no direct styling needed */
-}
-
-[data-rig-heatmap-row-labels] {
-  /* Row label group — no direct styling needed */
-}
-
 [data-rig-heatmap-col-labels] text,
 [data-rig-heatmap-row-labels] text {
   fill: var(--color-muted-foreground);
-  @apply font-mono text-xs;
-}
-
-[data-rig-heatmap-cells] {
-  /* Cells container group — no direct styling needed */
+  @apply font-mono;
 }
 
 [data-rig-heatmap-cell] {
   stroke: var(--color-background);
-  stroke-width: 1;
   transition: opacity 0.15s ease;
-  cursor: pointer;
 }
 
 [data-rig-heatmap-cell]:hover {
@@ -255,10 +192,6 @@
   opacity: 0.2;
 }
 
-[data-rig-radar-chart-series] {
-  /* Series group — no direct styling needed */
-}
-
 [data-rig-radar-chart-area] {
   fill: var(--domain-accent, var(--color-primary));
   opacity: 0.2;
@@ -267,12 +200,11 @@
 [data-rig-radar-chart-line] {
   fill: none;
   stroke: var(--domain-accent, var(--color-primary));
-  stroke-width: 2;
 }
 
 [data-rig-radar-chart-label] {
   fill: var(--color-muted-foreground);
-  @apply font-mono text-xs;
+  @apply font-mono;
 }
 
 /* ───────── Treemap ───────── */
@@ -281,13 +213,8 @@
   @apply text-foreground;
 }
 
-[data-rig-treemap-node] {
-  cursor: pointer;
-}
-
 [data-rig-treemap-rect] {
   stroke: var(--color-background);
-  stroke-width: 2;
   transition: opacity 0.15s ease;
 }
 
@@ -297,8 +224,7 @@
 
 [data-rig-treemap-label] {
   fill: var(--color-foreground);
-  @apply font-mono text-xs;
-  pointer-events: none;
+  @apply font-mono;
 }
 
 /* ───────── SankeyDiagram ───────── */
@@ -307,17 +233,13 @@
   @apply text-foreground;
 }
 
-[data-rig-sankey-diagram-node] {
-  cursor: pointer;
-}
-
 [data-rig-sankey-diagram-rect] {
   fill: var(--domain-accent, var(--color-primary));
 }
 
 [data-rig-sankey-diagram-label] {
   fill: var(--color-muted-foreground);
-  @apply font-mono text-xs;
+  @apply font-mono;
 }
 
 [data-rig-sankey-diagram-link] {
@@ -334,12 +256,11 @@
 /* ───────── StatRow ───────── */
 
 [data-rig-stat-row] {
-  @apply flex items-center justify-between text-xs font-mono;
+  @apply font-mono;
 }
 
 [data-rig-stat-row][data-separator] {
-  padding-top: 4px;
-  border-top: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
+  border-top-color: color-mix(in srgb, var(--color-border) 50%, transparent);
 }
 
 [data-rig-stat-row-label] {
@@ -350,10 +271,6 @@
   color: var(--color-foreground);
 }
 
-[data-rig-stat-row][data-bold] [data-rig-stat-row-value] {
-  font-weight: 700;
-}
-
 [data-rig-stat-row][data-tone='success'] [data-rig-stat-row-value] {
   color: var(--color-success);
 }
@@ -377,42 +294,23 @@
 /* ───────── ChartTooltip ───────── */
 
 [data-rig-chart-tooltip] {
-  @apply absolute pointer-events-none z-50 text-foreground;
-
-  border-radius: 3px;
-  padding: 4px 8px;
-  font-size: 13px;
-  line-height: normal;
+  @apply text-foreground;
   background: var(--rig-widget-bg, var(--color-popover));
-  border: 1px solid var(--rig-widget-border, var(--color-border));
+  border-color: var(--rig-widget-border, var(--color-border));
   box-shadow: 0 2px 8px rgb(0 0 0 / 36%);
 }
 
 /* ───────── ChartEmpty ───────── */
 
-[data-rig-chart-empty] {
-  @apply flex flex-col items-center justify-center text-center;
-
-  height: 100%;
-  min-height: 300px;
-  padding: 0 24px;
-}
-
 [data-rig-chart-empty-icon] {
   color: var(--color-muted-foreground);
-  font-size: 30px;
-  margin-bottom: 12px;
 }
 
 [data-rig-chart-empty-label] {
-  @apply font-mono text-sm;
-
+  @apply font-mono;
   color: color-mix(in srgb, var(--color-foreground) 40%, transparent);
-  margin: 0;
 }
 
 [data-rig-chart-empty-hint] {
-  @apply text-xs text-muted-foreground;
-
-  margin: 4px 0 0;
+  @apply text-muted-foreground;
 }

package/src/shared/components/editor.css

@@ -1,40 +1,21 @@
-/* Hex — Shared Editor Components
- * Theme styles for Rig's editor package: EditorWorkbench, EditorTab,
- * CodeBlock, DiffViewer, ColorPicker.
+/* Hex — Shared Editor Components (skin only)
+ * Colors, backgrounds, borders (colors), shadows, font-family, transitions.
+ * Structural layout lives in Rig/src/styles/editor.css.
  */
 
 /* ───────── Editor Workbench ───────── */
 
 [data-rig-editor-workbench] {
-  display: flex;
-  flex-direction: column;
   background: var(--color-background);
 }
 
 [data-rig-editor-workbench-tabs] {
-  display: flex;
-  align-items: stretch;
-  overflow-x: auto;
   background: var(--rig-editor-group-header-bg);
-  border-bottom: none;
   font-family: var(--font-sans);
-  scrollbar-width: none;
-  user-select: none;
-  height: 35px;
-}
-
-[data-rig-editor-workbench-tabs]::-webkit-scrollbar {
-  display: none;
-}
-
-[data-rig-editor-workbench-content] {
-  flex: 1;
-  overflow: auto;
 }
 
 [data-rig-editor-workbench-empty] {
   color: var(--rig-description-fg);
-  font-size: 13px;
 }
 
 /* ───────── Editor Tab ───────── */
@@ -42,21 +23,11 @@
 [data-rig-editor-tab] {
   @apply transition-colors;
 
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0 10px;
-  height: 35px;
-  white-space: nowrap;
-  flex-shrink: 0;
-  cursor: pointer;
-  font-size: 13px;
   color: var(--rig-tab-inactive-fg);
   background: var(--rig-tab-inactive-bg);
-  border-top: 2px solid transparent;
-  border-bottom: 2px solid transparent;
-  border-right: 1px solid var(--rig-tab-border);
-  border-left: none;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  border-right-color: var(--rig-tab-border);
 }
 
 [data-rig-editor-tab]:hover {
@@ -71,52 +42,13 @@
   border-right-color: transparent;
 }
 
-[data-rig-editor-tab-label] {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Tab dirty/close CSS toggle — dirty shows dot, close shows on hover;
-   on dirty+hover: dot hides, close shows */
 [data-rig-editor-tab-dirty] {
-  border-radius: 50%;
   background: var(--color-foreground);
-  width: 8px;
-  height: 8px;
-  display: none;
-  flex-shrink: 0;
-}
-
-[data-rig-editor-tab][data-dirty] [data-rig-editor-tab-dirty] {
-  display: block;
 }
 
 [data-rig-editor-tab-close] {
   color: var(--rig-description-fg);
-  font-size: 12px;
-  opacity: 0;
   transition: opacity 0.1s;
-  flex-shrink: 0;
-  cursor: pointer;
-}
-
-[data-rig-editor-tab][data-state='active'] [data-rig-editor-tab-close],
-[data-rig-editor-tab]:hover [data-rig-editor-tab-close] {
-  opacity: 1;
-}
-
-/* Dirty tab: dot visible, close hidden — swap on hover */
-[data-rig-editor-tab][data-dirty] [data-rig-editor-tab-close] {
-  opacity: 0;
-}
-
-[data-rig-editor-tab][data-dirty]:hover [data-rig-editor-tab-dirty] {
-  display: none;
-}
-
-[data-rig-editor-tab][data-dirty]:hover [data-rig-editor-tab-close] {
-  opacity: 1;
 }
 
 [data-rig-editor-tab-close]:hover {
@@ -125,54 +57,30 @@
   border-radius: 3px;
 }
 
-/* Drag-over indicator */
 [data-rig-editor-tab][data-drag-over] {
-  border-left: 2px solid var(--color-primary);
-}
-
-/* Pinned tab indicator */
-[data-rig-editor-tab][data-pinned] {
-  font-style: italic;
+  border-left-color: var(--color-primary);
 }
 
 /* ───────── CodeBlock ───────── */
 
 [data-rig-code-block] {
   background: var(--rig-editor-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius);
+  border-color: var(--color-border);
   font-family: var(--font-mono);
-  font-size: 13px;
 }
 
 [data-rig-code-block-header] {
   background: var(--color-card);
-  border-bottom: 1px solid var(--color-border);
-  padding: 6px 12px;
-  font-size: 12px;
+  border-bottom-color: var(--color-border);
   color: var(--rig-description-fg);
 }
 
 [data-rig-code-block-language] {
   color: var(--color-muted-foreground);
-  font-size: 12px;
-}
-
-[data-rig-code-block-pre] {
-  margin: 0;
-  overflow-x: auto;
-}
-
-[data-rig-code-block-code] {
-  display: block;
-  font-family: inherit;
 }
 
 [data-rig-code-block-line-number] {
   color: var(--rig-editor-line-number-fg);
-  user-select: none;
-  text-align: right;
-  padding-right: 12px;
 }
 
 [data-rig-code-block-line] {
@@ -181,9 +89,6 @@
 
 [data-rig-code-block-copy] {
   color: var(--rig-description-fg);
-  font-size: 12px;
-  border-radius: var(--radius);
-  padding: 2px 6px;
   transition: color 0.15s ease;
 }
 
@@ -196,27 +101,21 @@
 
 [data-rig-diff-viewer] {
   background: var(--rig-editor-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius);
+  border-color: var(--color-border);
   font-family: var(--font-mono);
-  font-size: 13px;
 }
 
 [data-rig-diff-viewer-header] {
   background: var(--color-card);
-  border-bottom: 1px solid var(--color-border);
-  padding: 6px 12px;
-  font-size: 12px;
+  border-bottom-color: var(--color-border);
   color: var(--rig-description-fg);
 }
 
 [data-rig-diff-viewer-language] {
   color: var(--color-muted-foreground);
-  font-size: 12px;
 }
 
 [data-rig-diff-viewer-stats] {
-  font-size: 12px;
   color: var(--color-muted-foreground);
 }
 
@@ -228,23 +127,8 @@
   color: var(--color-destructive, #ef4444);
 }
 
-[data-rig-diff-viewer-unified] {
-  overflow-x: auto;
-}
-
-[data-rig-diff-viewer-split] {
-  display: flex;
-  overflow-x: auto;
-}
-
-[data-rig-diff-viewer-pane] {
-  flex: 1;
-  min-width: 0;
-  overflow-x: auto;
-}
-
 [data-rig-diff-viewer-pane] + [data-rig-diff-viewer-pane] {
-  border-left: 1px solid var(--color-border);
+  border-left-color: var(--color-border);
 }
 
 [data-rig-diff-viewer-line] {
@@ -267,24 +151,15 @@
 
 [data-rig-diff-viewer-gutter] {
   color: var(--rig-editor-line-number-fg);
-  user-select: none;
-  text-align: right;
 }
 
 [data-rig-diff-viewer-old-num],
 [data-rig-diff-viewer-new-num] {
   color: var(--rig-editor-line-number-fg);
-  user-select: none;
-  text-align: right;
-  padding-right: 4px;
-  min-width: 2em;
-  display: inline-block;
 }
 
 [data-rig-diff-viewer-prefix] {
   color: var(--color-muted-foreground);
-  user-select: none;
-  padding: 0 4px;
 }
 
 [data-rig-diff-viewer-content] {
@@ -295,64 +170,58 @@
 
 [data-rig-color-picker] {
   background: var(--color-background);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius);
-  padding: 12px;
+  border-color: var(--color-border);
 }
 
 [data-rig-color-picker-preview] {
-  border-radius: var(--radius);
-  outline: 1px solid var(--color-border);
-}
-
-[data-rig-color-picker-sliders] {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+  outline-color: var(--color-border);
 }
 
 [data-rig-color-picker-field] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
   color: var(--rig-description-fg);
-  font-size: 12px;
 }
 
 [data-rig-color-picker-hue] {
-  @apply appearance-none h-2 rounded cursor-pointer;
-
   background: linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia, red);
 }
 
 [data-rig-color-picker-saturation] {
-  @apply appearance-none h-2 rounded cursor-pointer;
-
   background: linear-gradient(to right, hsl(0 0% 50%), hsl(0 100% 50%));
 }
 
 [data-rig-color-picker-lightness] {
-  @apply appearance-none h-2 rounded cursor-pointer;
-
   background: linear-gradient(to right, #000, hsl(0 100% 50%), #fff);
 }
 
 [data-rig-color-picker-hex] {
-  font-size: 12px;
   color: var(--rig-description-fg);
 }
 
 [data-rig-color-picker-input] {
   background: var(--rig-input-bg);
-  border: 1px solid var(--rig-input-border);
-  border-radius: var(--radius);
-  padding: 4px 6px;
+  border-color: var(--rig-input-border);
   color: var(--color-foreground);
-  font-size: 12px;
   font-family: var(--font-mono);
 }
 
 [data-rig-color-picker-input]:focus {
-  outline: none;
   border-color: var(--color-ring);
 }
+
+/* ───────── Pane Group ───────── */
+
+[data-rig-pane-group][data-focused]::after {
+  outline-color: var(--color-ring);
+  opacity: 0.35;
+}
+
+/* Resizer between panes */
+
+[data-rig-split-editor-area] [data-rig-resizer]::after {
+  background: var(--color-border);
+}
+
+[data-rig-split-editor-area] [data-rig-resizer]:hover::after,
+[data-rig-split-editor-area] [data-rig-resizer][data-dragging]::after {
+  background: var(--color-ring);
+}