Initial open-source release

Claude-Session: https://claude.ai/code/session_01B65qLEKnkeYTGdbwhLpjCu

src/ui/Tabs.module.css

@@ -0,0 +1,156 @@
+.strip {
+  flex: none;
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+}
+/* Islands tabs: the selected tab is a rounded pill (tab-selected-bg / -border); no underline, no separators. */
+.editor {
+  height: var(--h-header);
+  padding: 0 4px;
+}
+.compact {
+  /* Shrinks inside tool window headers so the overflow dropdown can take over. */
+  flex: 0 1 auto;
+  height: 28px;
+}
+.scroller {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+.scroller::-webkit-scrollbar {
+  display: none;
+}
+.tab {
+  position: relative;
+  flex: none;
+  display: flex;
+  align-items: stretch;
+  height: calc(100% - 6px);
+  min-height: 22px;
+  max-height: 28px;
+  border-radius: var(--radius-tab, 6px);
+  color: var(--fg-strong);
+  transition:
+    color var(--dur-fast) var(--ease),
+    background var(--dur-fast) var(--ease);
+}
+.tab:hover {
+  background: var(--bg-toolbar-hover);
+}
+.selected,
+.selected:hover {
+  background: var(--bg-tab-selected);
+  box-shadow: inset 0 0 0 1px var(--border-tab-selected);
+}
+.tabButton {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
+  border-radius: inherit;
+  white-space: nowrap;
+  color: inherit;
+}
+.compact .tabButton {
+  padding: 0 10px;
+}
+.closable .tabButton {
+  padding-right: 2px;
+}
+.tabButton:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -2px;
+}
+.tabIcon {
+  flex: none;
+  color: var(--fg-muted);
+}
+.tabLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 260px;
+}
+.italic {
+  font-style: italic;
+}
+.closeSlot {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 20px;
+  margin-right: 4px;
+}
+.close {
+  color: var(--fg-muted);
+  opacity: 0;
+  transition: opacity var(--dur-fast) var(--ease);
+}
+.tab:hover .close,
+.selected .close,
+.close:focus-visible {
+  opacity: 1;
+}
+.modified {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--fg-muted);
+  flex: none;
+}
+.closeSlot .modified {
+  position: absolute;
+  left: 7px;
+  pointer-events: none;
+  transition: opacity var(--dur-fast) var(--ease);
+}
+.tab:hover .closeSlot .modified,
+.selected .closeSlot .modified {
+  opacity: 0;
+}
+.more {
+  align-self: center;
+  margin: 0 4px;
+}
+.trailing {
+  flex: 1 0 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+/* drag & drop */
+.dragging {
+  opacity: 0.5;
+}
+.dropBefore::before,
+.dropAfter::after {
+  content: "";
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  width: 2px;
+  background: var(--accent);
+  z-index: 1;
+  pointer-events: none;
+}
+.dropBefore::before {
+  left: -2px;
+}
+.dropAfter::after {
+  right: -2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tab,
+  .close,
+  .closeSlot .modified {
+    transition: none;
+  }
+}