@amulet-laboratories/hex 0.3.0

package/src/shared/components/lists.css

@@ -0,0 +1,278 @@
+/* Hex — Shared Lists Components
+ * Theme styles for Rig's lists package: List, TreeView, Table, DataGrid.
+ */
+
+/* ───────── Table ───────── */
+
+[data-rig-table] {
+  font-size: 13px;
+}
+
+[data-rig-table-head] {
+  background: var(--color-background);
+}
+
+[data-rig-table-header] {
+  color: var(--rig-description-fg);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  transition: color 0.15s ease;
+}
+
+[data-rig-table-header]:hover {
+  color: var(--color-foreground);
+}
+
+[data-rig-table-body] [data-rig-table-row] {
+  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
+  transition: background-color 0.15s ease;
+}
+
+[data-rig-table-body] [data-rig-table-row]:hover {
+  background: var(--rig-list-hover-bg);
+}
+
+[data-rig-table-cell] {
+  font-size: 13px;
+}
+
+[data-rig-table-empty] {
+  color: var(--rig-description-fg);
+  font-size: 13px;
+}
+
+/* ───────── List ───────── */
+
+[data-rig-list] {
+  font-size: 13px;
+}
+
+[data-rig-list-item] {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 2px 8px;
+  min-height: 22px;
+  font-size: 13px;
+  color: var(--color-foreground);
+  cursor: default;
+  text-align: left;
+  transition: background-color 0.15s ease;
+}
+
+[data-rig-list-item]:hover {
+  background: var(--rig-list-hover-bg);
+}
+
+[data-rig-list-item][data-selected] {
+  background: var(--rig-list-inactive-bg);
+  color: var(--color-foreground);
+}
+
+[data-rig-list-item][data-highlighted] {
+  background: var(--rig-list-active-bg);
+  color: var(--rig-list-active-fg);
+}
+
+[data-rig-list-item]:focus {
+  outline: 1px solid var(--color-ring);
+  outline-offset: -1px;
+}
+
+[data-rig-list-item][data-selected]:focus-within {
+  background: var(--rig-list-active-bg);
+  color: var(--rig-list-active-fg);
+}
+
+[data-rig-list-item][data-disabled] {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+[data-rig-list-item-label] {
+  color: var(--color-foreground);
+  font-size: 13px;
+}
+
+[data-rig-list-item-description] {
+  color: var(--rig-description-fg);
+  font-size: 12px;
+}
+
+/* ───────── Tree ───────── */
+
+[data-rig-tree] {
+  font-size: 13px;
+  outline: none;
+}
+
+[data-rig-tree-node] {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: 22px;
+  padding: 0 8px;
+  min-width: 100%;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+[data-rig-tree-node]:hover {
+  background: var(--rig-list-hover-bg);
+}
+
+[data-rig-tree-node][data-selected] {
+  background: var(--rig-list-inactive-bg);
+}
+
+[data-rig-tree-node]:focus {
+  background: var(--rig-list-active-bg);
+  color: var(--rig-list-active-fg);
+  outline: none;
+}
+
+[data-rig-tree-node][data-selected]:focus-within {
+  background: var(--rig-list-active-bg);
+  color: var(--rig-list-active-fg);
+}
+
+[data-rig-tree-node][data-loading] {
+  opacity: 0.6;
+}
+
+/* Indent container */
+[data-rig-tree-indent] {
+  display: inline-flex;
+  align-items: stretch;
+}
+
+/* Indent guides — always visible at low opacity, brighter on hover/focus */
+[data-rig-tree-indent-guide] {
+  width: 8px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--color-border);
+  align-self: stretch;
+  opacity: 0.4;
+}
+
+[data-rig-tree-node]:hover [data-rig-tree-indent-guide],
+[data-rig-tree-node]:focus [data-rig-tree-indent-guide],
+[data-rig-tree-node][data-selected] [data-rig-tree-indent-guide] {
+  opacity: 1;
+}
+
+/* Toggle chevron */
+[data-rig-tree-toggle] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--rig-description-fg);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+/* Leaf spacer — maintains alignment when no toggle */
+[data-rig-tree-node][data-leaf] {
+  padding-left: calc(8px + 16px);
+}
+
+/* Node icon */
+[data-rig-tree-node-icon] {
+  flex-shrink: 0;
+  margin-right: 2px;
+}
+
+[data-rig-tree-toggle]::before {
+  content: '';
+  display: block;
+  width: 6px;
+  height: 8px;
+  background: currentColor;
+  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+  transition: transform 0.15s ease;
+}
+
+[data-rig-tree-toggle][data-state='open']::before {
+  transform: rotate(90deg);
+}
+
+[data-rig-tree-node-label] {
+  color: var(--color-foreground);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ───────── DataGrid ───────── */
+
+[data-rig-data-grid] {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  font-size: 13px;
+}
+
+[data-rig-data-grid-header] {
+  background: var(--color-card);
+  border-bottom: 1px solid var(--color-border);
+}
+
+[data-rig-data-grid-header-cell] {
+  color: var(--rig-description-fg);
+  font-size: 12px;
+  font-weight: 500;
+  border-right: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
+}
+
+[data-rig-data-grid-header-cell][data-sortable]:hover {
+  background: var(--rig-list-hover-bg);
+  cursor: pointer;
+}
+
+[data-rig-data-grid-header-cell]:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 1px var(--color-ring);
+}
+
+[data-rig-data-grid-sort-indicator] {
+  color: var(--rig-description-fg);
+}
+
+[data-rig-data-grid-body] {
+  display: contents;
+}
+
+[data-rig-data-grid-row] {
+  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
+  transition: background-color 0.15s ease;
+}
+
+[data-rig-data-grid-row]:hover {
+  background: var(--rig-list-hover-bg);
+}
+
+[data-rig-data-grid-row]:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 1px var(--color-ring);
+}
+
+[data-rig-data-grid-row]:nth-child(even) {
+  background: color-mix(in srgb, var(--color-foreground) 2%, transparent);
+}
+
+[data-rig-data-grid-cell] {
+  color: var(--color-foreground);
+  border-right: 1px solid color-mix(in srgb, var(--color-border) 30%, transparent);
+}
+
+[data-rig-data-grid-empty] {
+  color: var(--rig-description-fg);
+  text-align: center;
+  padding: 24px 0;
+}

package/src/shared/components/menus.css

@@ -0,0 +1,377 @@
+/* Hex — Shared Menus Components
+ * Theme styles for Rig's menus package: CommandPalette, ContextMenu,
+ * ActionBar, KeyboardHint, DropdownMenu, Menubar.
+ */
+
+/* ───────── Command Palette ───────── */
+
+[data-rig-command-palette-overlay] {
+  position: fixed;
+  inset: 0;
+  z-index: var(--rig-command-palette-z, 9999);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 20vh;
+  background: rgb(0 0 0 / 50%);
+}
+
+[data-rig-command-palette] {
+  background: var(--vsc-quickinput-bg);
+  border: 1px solid var(--vsc-widget-border);
+  box-shadow: 0 8px 30px rgb(0 0 0 / 50%);
+  border-radius: 8px;
+  overflow: hidden;
+  max-width: 600px;
+}
+
+[data-rig-command-palette-input] {
+  background: var(--vsc-input-bg);
+  color: var(--color-foreground);
+  border-bottom: 1px solid var(--color-border);
+  font-size: 13px;
+  outline: none;
+}
+
+[data-rig-command-palette-input]::placeholder {
+  color: var(--vsc-input-placeholder);
+}
+
+[data-rig-command-palette-results] {
+  overflow-y: auto;
+  max-height: 300px;
+}
+
+[data-rig-command-palette-item] {
+  transition: background-color 0.1s ease;
+}
+
+[data-rig-command-palette-item]:hover {
+  background: var(--vsc-list-hover-bg);
+}
+
+[data-rig-command-palette-item][data-highlighted] {
+  background: var(--vsc-list-active-bg);
+  color: var(--vsc-list-active-fg);
+}
+
+[data-rig-command-palette-item][data-disabled] {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+[data-rig-command-palette-item-label] {
+  color: var(--color-foreground);
+  font-size: 13px;
+}
+
+[data-rig-command-palette-item-description] {
+  color: var(--vsc-description-fg);
+  font-size: 12px;
+  font-family: var(--font-mono);
+}
+
+[data-rig-command-palette-empty] {
+  color: var(--vsc-description-fg);
+  font-size: 13px;
+}
+
+/* ───────── Context Menu ───────── */
+
+[data-rig-context-menu] {
+  display: flex;
+  flex-direction: column;
+  padding: 4px 0;
+  background: var(--vsc-menu-bg);
+  border: 1px solid var(--vsc-widget-border);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 50%);
+  border-radius: 5px;
+  overflow: hidden;
+  min-width: 220px;
+}
+
+[data-rig-context-menu-item] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  width: 100%;
+  height: 26px;
+  padding: 0 12px;
+  border: none;
+  background: none;
+  color: var(--color-foreground);
+  font-size: 13px;
+  white-space: nowrap;
+  cursor: default;
+  text-align: left;
+  transition: background-color 0.1s ease;
+}
+
+[data-rig-context-menu-item]:hover {
+  background: var(--vsc-menu-selection-bg);
+  color: var(--vsc-list-active-fg);
+}
+
+[data-rig-context-menu-item][data-highlighted] {
+  background: var(--vsc-menu-selection-bg);
+  color: var(--vsc-list-active-fg);
+}
+
+[data-rig-context-menu-item][data-disabled] {
+  opacity: 0.4;
+}
+
+[data-rig-context-menu-label] {
+  color: var(--color-foreground);
+  font-size: 13px;
+}
+
+[data-rig-context-menu-separator] {
+  height: 1px;
+  border: none;
+  margin: 4px 0;
+  background: var(--color-border);
+  pointer-events: none;
+}
+
+[data-rig-context-menu-keybinding] {
+  color: var(--vsc-description-fg);
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+/* ───────── Menubar ───────── */
+
+[data-rig-menubar] {
+  display: flex;
+  align-items: center;
+}
+
+[data-rig-menubar-entry] {
+  position: relative;
+  user-select: none;
+}
+
+[data-rig-menubar-trigger] {
+  color: var(--color-foreground);
+  font-size: 13px;
+  border-radius: 5px;
+  padding: 2px 8px;
+  transition: background-color 0.15s ease;
+}
+
+[data-rig-menubar-trigger]:hover {
+  background: var(--vsc-list-hover-bg);
+}
+
+[data-rig-menubar-trigger][data-state='open'] {
+  color: var(--color-foreground);
+  background: var(--vsc-list-hover-bg);
+}
+
+[data-rig-menubar-content] {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  min-width: 220px;
+  padding: 4px 0;
+  background: var(--vsc-menu-bg);
+  border: 1px solid var(--vsc-widget-border);
+  border-radius: 5px;
+  box-shadow: 0 8px 24px rgb(0 0 0 / 50%);
+  animation: menubar-in 0.1s ease;
+  overflow: hidden;
+}
+
+@keyframes menubar-in {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+[data-rig-menubar-separator] {
+  height: 1px;
+  border: none;
+  margin: 4px 0;
+  background: var(--color-border);
+  pointer-events: none;
+}
+
+[data-rig-menubar-item] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  width: 100%;
+  height: 26px;
+  padding: 0 12px;
+  border: none;
+  background: none;
+  color: var(--color-foreground);
+  font-size: 13px;
+  white-space: nowrap;
+  cursor: default;
+  text-align: left;
+  transition: background-color 0.1s ease;
+}
+
+[data-rig-menubar-item]:hover {
+  background: var(--vsc-menu-selection-bg);
+  color: var(--vsc-list-active-fg);
+}
+
+[data-rig-menubar-item][data-highlighted] {
+  background: var(--vsc-menu-selection-bg);
+  color: var(--vsc-list-active-fg);
+}
+
+[data-rig-menubar-item][data-disabled] {
+  opacity: 0.4;
+}
+
+[data-rig-menubar-item-label] {
+  color: var(--color-foreground);
+  font-size: 13px;
+}
+
+[data-rig-menubar-item-keybinding] {
+  color: var(--vsc-description-fg);
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+/* ───────── DropdownMenu ───────── */
+
+[data-rig-dropdown] {
+  position: relative;
+  display: inline-flex;
+}
+
+[data-rig-dropdown-trigger] {
+  cursor: pointer;
+}
+
+[data-rig-dropdown-menu] {
+  display: flex;
+  flex-direction: column;
+  padding: 4px 0;
+  min-width: 220px;
+  background: var(--vsc-menu-bg);
+  border: 1px solid var(--vsc-widget-border);
+  border-radius: 5px;
+  box-shadow: 0 8px 24px rgb(0 0 0 / 50%);
+  animation: menubar-in 0.1s ease;
+  overflow: hidden;
+}
+
+[data-rig-dropdown-item] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  width: 100%;
+  height: 26px;
+  padding: 0 12px;
+  border: none;
+  background: none;
+  color: var(--color-foreground);
+  font-size: 13px;
+  white-space: nowrap;
+  cursor: default;
+  text-align: left;
+  transition: background-color 0.1s ease;
+}
+
+[data-rig-dropdown-item]:hover {
+  background: var(--vsc-menu-selection-bg);
+  color: var(--vsc-list-active-fg);
+}
+
+[data-rig-dropdown-item][data-state='highlighted'] {
+  background: var(--vsc-menu-selection-bg);
+  color: var(--vsc-list-active-fg);
+}
+
+[data-rig-dropdown-item][data-disabled] {
+  opacity: 0.4;
+}
+
+[data-rig-dropdown-item-label] {
+  color: var(--color-foreground);
+  font-size: 13px;
+}
+
+[data-rig-dropdown-item-keybinding] {
+  color: var(--vsc-description-fg);
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+/* ───────── ActionBar ───────── */
+
+[data-rig-action-bar] {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+[data-rig-action-bar-item] {
+  color: var(--vsc-description-fg);
+  border-radius: 5px;
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+[data-rig-action-bar-item]:hover {
+  color: var(--color-foreground);
+  background: var(--vsc-list-hover-bg);
+}
+
+[data-rig-action-bar-item]:focus-visible {
+  outline: 1px solid var(--color-ring);
+  outline-offset: -1px;
+}
+
+[data-rig-action-bar-item][data-disabled] {
+  opacity: 0.4;
+}
+
+[data-rig-action-bar-overflow] {
+  color: var(--vsc-description-fg);
+  border-radius: 5px;
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+[data-rig-action-bar-overflow]:hover {
+  color: var(--color-foreground);
+  background: var(--vsc-list-hover-bg);
+}
+
+/* ───────── Keyboard Hint ───────── */
+
+[data-rig-keyboard-hint] {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+[data-rig-keyboard-hint-key] {
+  color: var(--vsc-keybinding-fg);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  border: 1px solid var(--color-border);
+  border-radius: 3px;
+  padding: 2px 4px;
+}