@amulet-laboratories/hex 0.3.0 → 0.5.1

package/src/shared/components/shell.css

@@ -1,12 +1,12 @@
-/* Hex — Shared Shell Components
- * Theme styles for Rig's shell package: IdeShell, ChatPanel, SearchPanel,
- * FileBrowser, ContentViewer, FormView, WelcomeView, SettingsView.
+/* Hex — Shared Shell Components (skin only)
+ * Colors, backgrounds, shadows, opacity, color-only transitions, font-family.
+ * Structural layout lives in Rig/src/styles/shell.css.
  */
 
 /* ───────── IdeShell ───────── */
 
 [data-rig-ide-shell] {
-  @apply bg-background text-foreground font-mono text-sm;
+  @apply bg-background text-foreground font-mono;
 }
 
 /* ───────── ChatPanel ───────── */
@@ -16,52 +16,20 @@
 }
 
 [data-rig-chat-panel-header] {
-  border-bottom: 1px solid var(--rig-sidebar-border);
-  font-size: 12px;
+  border-bottom-color: var(--rig-sidebar-border);
   font-family: var(--font-mono);
   color: var(--color-foreground);
 }
 
-[data-rig-chat-panel-messages] {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-[data-rig-chat-panel-message] {
-  padding: 0;
-}
-
 [data-rig-chat-panel-input] {
-  border-top: 1px solid var(--rig-sidebar-border);
-  padding: 0;
+  border-top-color: var(--rig-sidebar-border);
 }
 
 /* ── Header ── */
 
-[data-rig-chat-header-left] {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-[data-rig-chat-header-actions] {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
 [data-rig-chat-header-btn] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border: none;
   background: none;
   color: var(--color-muted-foreground);
-  border-radius: 4px;
-  cursor: pointer;
   transition:
     background-color 0.1s,
     color 0.1s;
@@ -78,57 +46,22 @@
 
 /* ── Chat bubbles ── */
 
-[data-rig-chat-bubble] {
-  font-size: 12px;
-  line-height: 1.6;
-}
-
-/* User: right-aligned pill */
-[data-rig-chat-bubble][data-role='user'] {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
 [data-rig-chat-bubble][data-role='user'] [data-rig-chat-bubble-content] {
   background: color-mix(in srgb, var(--color-primary) 15%, transparent);
-  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
-  border-radius: 12px 12px 4px 12px;
-  padding: 8px 14px;
-  max-width: 88%;
+  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
   color: var(--color-foreground);
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-/* Assistant: left-aligned, full width */
-[data-rig-chat-bubble][data-role='assistant'] {
-  display: flex;
-  flex-direction: column;
-}
-
-[data-rig-chat-bubble-header] {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  margin-bottom: 4px;
 }
 
 [data-rig-chat-bubble-label] {
-  font-size: 11px;
   font-family: var(--font-mono);
   color: var(--color-info);
-  font-weight: 500;
 }
 
 [data-rig-chat-bubble][data-role='assistant'] [data-rig-chat-bubble-content] {
   color: color-mix(in srgb, var(--color-foreground) 90%, transparent);
-  font-size: 12px;
-  line-height: 1.7;
 }
 
 [data-rig-chat-bubble-time] {
-  font-size: 10px;
   font-family: var(--font-mono);
   color: var(--color-muted-foreground);
   opacity: 0.5;
@@ -136,161 +69,69 @@
 
 /* ── Tool calls ── */
 
-[data-rig-chat-tools] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin-top: 8px;
-}
-
 [data-rig-chat-tool-badge] {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 10px;
   font-family: var(--font-mono);
   color: var(--color-muted-foreground);
   background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
-  border: 1px solid color-mix(in srgb, var(--color-foreground) 8%, transparent);
-  border-radius: 4px;
-  padding: 2px 8px;
-  height: 20px;
+  border-color: color-mix(in srgb, var(--color-foreground) 8%, transparent);
 }
 
 [data-rig-chat-tool-error] {
   color: var(--color-destructive);
-  font-size: 9px;
-  text-transform: uppercase;
 }
 
 /* ── Typing indicator ── */
 
-[data-rig-chat-typing] {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 0;
-}
-
 [data-rig-chat-typing-dot] {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
   background: var(--color-info);
   opacity: 0.3;
-  animation: chat-typing 1.4s infinite ease-in-out;
-}
-
-[data-rig-chat-typing-dot]:nth-child(2) {
-  animation-delay: 0.2s;
+  animation:
+    chat-typing 1.4s infinite ease-in-out,
+    chat-typing-opacity 1.4s infinite ease-in-out;
 }
 
-[data-rig-chat-typing-dot]:nth-child(3) {
-  animation-delay: 0.4s;
-}
-
-@keyframes chat-typing {
+@keyframes chat-typing-opacity {
   0%,
   80%,
   100% {
     opacity: 0.3;
-    transform: scale(1);
   }
   40% {
     opacity: 1;
-    transform: scale(1.3);
   }
 }
 
 /* ── Empty state ── */
 
-[data-rig-chat-empty] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 2rem;
-  text-align: center;
-}
-
 [data-rig-chat-empty-icon] {
   color: var(--color-info);
   opacity: 0.3;
-  margin-bottom: 12px;
 }
 
 [data-rig-chat-empty-title] {
-  font-size: 14px;
   font-family: var(--font-mono);
   color: var(--color-foreground);
-  margin-bottom: 6px;
 }
 
 [data-rig-chat-empty-desc] {
-  font-size: 11px;
   color: var(--color-muted-foreground);
-  line-height: 1.5;
-  max-width: 220px;
 }
 
 /* ── Input area ── */
 
-[data-rig-chat-input-area] {
-  display: flex;
-  flex-direction: column;
-}
-
-[data-rig-chat-context-bar] {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 8px 12px 0;
-}
-
 [data-rig-chat-context-chip] {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 10px;
   font-family: var(--font-mono);
   color: var(--color-muted-foreground);
   background: color-mix(in srgb, var(--color-foreground) 5%, transparent);
-  border: 1px solid color-mix(in srgb, var(--color-foreground) 8%, transparent);
-  border-radius: 10px;
-  padding: 2px 8px;
-  height: 20px;
-}
-
-[data-rig-chat-context-dot] {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-[data-rig-chat-composer] {
-  display: flex;
-  align-items: flex-end;
-  gap: 6px;
-  padding: 8px 12px;
+  border-color: color-mix(in srgb, var(--color-foreground) 8%, transparent);
 }
 
 [data-rig-chat-textarea] {
-  flex: 1;
-  resize: none;
-  min-height: 22px;
-  max-height: 120px;
-  padding: 6px 10px;
-  font-size: 12px;
   font-family: var(--font-sans);
-  line-height: 1.5;
   color: var(--color-foreground);
   background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
-  border: 1px solid var(--rig-sidebar-border);
-  border-radius: 8px;
-  outline: none;
-  overflow-y: auto;
+  border-color: var(--rig-sidebar-border);
+  transition: border-color 0.15s ease;
 }
 
 [data-rig-chat-textarea]:focus {
@@ -307,17 +148,8 @@
 }
 
 [data-rig-chat-send] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
-  border: none;
   background: var(--color-info);
   color: #fff;
-  cursor: pointer;
-  flex-shrink: 0;
   transition:
     opacity 0.15s,
     transform 0.1s;
@@ -325,29 +157,15 @@
 
 [data-rig-chat-send]:disabled {
   opacity: 0.2;
-  cursor: default;
 }
 
 [data-rig-chat-send]:not(:disabled):hover {
   opacity: 0.9;
-  transform: scale(1.04);
-}
-
-[data-rig-chat-send]:not(:disabled):active {
-  transform: scale(0.96);
 }
 
-/* ── Footer: model + hints ── */
-
-[data-rig-chat-footer] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 12px 8px;
-}
+/* ── Footer ── */
 
 [data-rig-chat-footer-hint] {
-  font-size: 10px;
   font-family: var(--font-mono);
   color: var(--color-muted-foreground);
   opacity: 0.4;
@@ -355,27 +173,15 @@
 
 [data-rig-chat-footer-hint] kbd {
   font-family: var(--font-mono);
-  font-size: 10px;
-  padding: 0 3px;
-  border: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
-  border-radius: 3px;
+  border-color: color-mix(in srgb, var(--color-foreground) 15%, transparent);
 }
 
 /* ── Model selector ── */
 
 [data-rig-chat-model-selector] {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 10px;
   font-family: var(--font-mono);
   color: var(--color-muted-foreground);
   background: none;
-  border: none;
-  cursor: pointer;
-  padding: 2px 6px;
-  border-radius: 4px;
-  white-space: nowrap;
   transition:
     background-color 0.1s,
     color 0.1s;
@@ -387,33 +193,15 @@
 }
 
 [data-rig-chat-model-menu] {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  margin-bottom: 4px;
-  min-width: 200px;
-  padding: 4px 0;
   background: var(--vsc-menu-bg);
-  border: 1px solid var(--vsc-widget-border);
-  border-radius: 5px;
+  border-color: var(--vsc-widget-border);
   box-shadow: 0 8px 24px rgb(0 0 0 / 50%);
-  z-index: 9999;
 }
 
 [data-rig-chat-model-option] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 28px;
-  padding: 0 12px;
-  border: none;
   background: none;
   color: var(--color-foreground);
-  font-size: 12px;
   font-family: var(--font-mono);
-  cursor: default;
-  text-align: left;
   transition: background-color 0.1s;
 }
 
@@ -426,14 +214,7 @@
   color: var(--color-info);
 }
 
-[data-rig-chat-model-option-left] {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
 [data-rig-chat-model-option-desc] {
-  font-size: 10px;
   color: var(--color-muted-foreground);
 }
 
@@ -449,10 +230,6 @@
   background: var(--color-background);
 }
 
-[data-rig-file-browser-content] {
-  padding-top: 6px;
-}
-
 /* ───────── ContentViewer ───────── */
 
 [data-rig-content-viewer] {
@@ -460,25 +237,15 @@
 }
 
 [data-rig-content-viewer-breadcrumbs] {
-  border-bottom: 1px solid var(--color-border);
+  border-bottom-color: var(--color-border);
 }
 
 [data-rig-content-viewer-header] {
-  padding: 0;
-  border-bottom: 1px solid var(--color-border);
-}
-
-[data-rig-content-viewer-body] {
-  padding: 0;
+  border-bottom-color: var(--color-border);
 }
 
 [data-rig-content-viewer-empty] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 8rem;
   color: var(--color-muted-foreground);
-  font-size: 12px;
   font-family: var(--font-mono);
 }
 
@@ -489,11 +256,11 @@
 }
 
 [data-rig-form-view-header] {
-  border-bottom: 1px solid var(--color-border);
+  border-bottom-color: var(--color-border);
 }
 
 [data-rig-form-view-actions] {
-  border-top: 1px solid var(--color-border);
+  border-top-color: var(--color-border);
 }
 
 /* ───────── WelcomeView ───────── */
@@ -504,15 +271,12 @@
 
 [data-rig-welcome-view-title] {
   font-family: var(--font-mono);
-  font-size: 18px;
   color: var(--color-foreground);
 }
 
 [data-rig-welcome-view-description] {
   font-family: var(--font-mono);
-  font-size: 13px;
   color: var(--color-muted-foreground);
-  margin-top: 0.25rem;
 }
 
 /* ───────── SettingsView ───────── */
@@ -523,6 +287,5 @@
 
 [data-rig-settings-view-title] {
   font-family: var(--font-mono);
-  font-size: 18px;
   color: var(--color-foreground);
 }

package/src/shared/components/spatial.css

@@ -1,19 +1,14 @@
-/* Hex — Shared Spatial Components
- * Styles for Rig's spatial package: MapCanvas, GlobeView,
- * ScatterPlot3D, GraphNetwork, PointCloud
+/* Hex — Shared Spatial Components (skin only)
+ * Fills, strokes, backgrounds, outline colors, opacity, font-family.
+ * Structural layout lives in Rig/src/styles/spatial.css.
  */
 
 /* ───────── MapCanvas ───────── */
 
 [data-rig-map-canvas] {
-  @apply bg-card border border-border/50;
+  @apply bg-card;
   border-radius: var(--radius);
-  cursor: grab;
-  user-select: none;
-}
-
-[data-rig-map-canvas][data-dragging] {
-  cursor: grabbing;
+  border-color: color-mix(in srgb, var(--color-border) 50%, transparent);
 }
 
 [data-rig-map-canvas-viewport] {
@@ -25,11 +20,6 @@
   opacity: 0.1;
 }
 
-[data-rig-map-canvas-marker] {
-  cursor: pointer;
-  transition: opacity 0.15s ease;
-}
-
 [data-rig-map-canvas-marker] circle {
   fill: var(--domain-accent, var(--color-primary));
 }
@@ -39,21 +29,18 @@
 }
 
 [data-rig-map-canvas-marker]:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
+  outline-color: var(--color-ring);
 }
 
 [data-rig-map-canvas-marker-label] {
   fill: var(--color-foreground);
-  @apply font-mono text-xs;
+  @apply font-mono;
 }
 
 /* ───────── GlobeView ───────── */
 
 [data-rig-globe-view] {
   @apply bg-background;
-  cursor: grab;
-  user-select: none;
 }
 
 [data-rig-globe-view-sphere] {
@@ -66,11 +53,6 @@
   opacity: 0.1;
 }
 
-[data-rig-globe-view-marker] {
-  cursor: pointer;
-  transition: opacity 0.15s ease;
-}
-
 [data-rig-globe-view-marker] circle {
   fill: var(--domain-accent, var(--color-primary));
 }
@@ -80,13 +62,12 @@
 }
 
 [data-rig-globe-view-marker]:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
+  outline-color: var(--color-ring);
 }
 
 [data-rig-globe-view-marker-label] {
   fill: var(--color-foreground);
-  @apply font-mono text-xs;
+  @apply font-mono;
 }
 
 /* ───────── ScatterPlot3D ───────── */
@@ -106,13 +87,11 @@
 
 [data-rig-scatter-plot-3d-axis-label] {
   fill: var(--color-muted-foreground);
-  @apply font-mono text-xs;
+  @apply font-mono;
 }
 
 [data-rig-scatter-plot-3d-point] {
   fill: var(--domain-accent, var(--color-primary));
-  transition: opacity 0.15s ease;
-  cursor: pointer;
 }
 
 [data-rig-scatter-plot-3d-point]:hover {
@@ -122,44 +101,36 @@
 /* ───────── GraphNetwork ───────── */
 
 [data-rig-graph-network] {
-  @apply bg-card border border-border/50;
+  @apply bg-card;
   border-radius: var(--radius);
+  border-color: color-mix(in srgb, var(--color-border) 50%, transparent);
 }
 
 [data-rig-graph-network-edge] {
   stroke: var(--color-border);
   opacity: 0.3;
-  transition: opacity 0.15s ease;
-  cursor: pointer;
 }
 
 [data-rig-graph-network-edge]:hover {
   opacity: 0.6;
 }
 
-[data-rig-graph-network-node] {
-  cursor: pointer;
-  transition: opacity 0.15s ease;
-}
-
 [data-rig-graph-network-node]:hover {
   opacity: 0.8;
 }
 
 [data-rig-graph-network-node]:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
+  outline-color: var(--color-ring);
 }
 
 [data-rig-graph-network-node-circle] {
   fill: var(--domain-accent, var(--color-primary));
   stroke: var(--color-foreground);
-  stroke-width: 1;
 }
 
 [data-rig-graph-network-node-label] {
   fill: var(--color-foreground);
-  @apply font-mono text-xs;
+  @apply font-mono;
 }
 
 /* ───────── PointCloud ───────── */
@@ -170,8 +141,6 @@
 
 [data-rig-point-cloud-point] {
   fill: var(--domain-accent, var(--color-primary));
-  transition: opacity 0.15s ease;
-  cursor: pointer;
 }
 
 [data-rig-point-cloud-point]:hover {
@@ -179,6 +148,5 @@
 }
 
 [data-rig-point-cloud-point]:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
+  outline-color: var(--color-ring);
 }