@lijian-ui/dsh-file-manager 0.1.20

package/src/client/styles/chip.module.css

@@ -0,0 +1,38 @@
+/**
+ * Global restyle of the shell's reference chips to the file-reference look
+ * (the user's screenshot): a muted rounded pill with a green `</>` code
+ * glyph. The shell renders every U+FFFC chip with `data-decoration="chip"`
+ * (InputBar), so this file overrides its default blue tint through that
+ * attribute — the hash-scoped `.chip` class stays untouched and alignment
+ * (the U+FFFC advance cell) is preserved because the glyph comes from the
+ * label cell's ::before, not the placeholder cell's.
+ *
+ * Side effect: chips of other sources (skills, subagents) pick up the same
+ * pill look — a uniform, muted family, which the shell's default blue
+ * already intended.
+ * @module dsh-filemgr/client/styles/chip
+ */
+
+:global([data-decoration="chip"]) {
+  background: rgba(15, 23, 42, 0.06);
+  border-radius: 6px;
+}
+
+:global(body[data-ds-dark-theme] [data-decoration="chip"]) {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* The label cell keeps the shell's default 0.72 compensated scale (no
+   override here) — the pill text renders at the composer's native size. */
+
+/* The green `</>` glyph, drawn inside the label cell (absolute-positioned by
+   the shell, so this never shifts the placeholder advance). */
+:global([data-decoration="chip"] > span::before) {
+  content: "</>";
+  color: var(--aion-success, #16a34a);
+  font-family: var(--aion-font-mono, ui-monospace, Menlo, Consolas, monospace);
+  font-size: 0.85em;
+  font-weight: 700;
+  margin-right: 4px;
+  letter-spacing: -0.5px;
+}

package/src/client/styles/drag.module.css

@@ -0,0 +1,30 @@
+/**
+ * Composer dock drag inlay: a zero-height strip above the composer card
+ * that appears while an explorer file row is dragged over the page. Uses
+ * the panel's own token palette so the hint follows the active theme.
+ * @module dsh-filemgr/client/styles/drag
+ */
+
+.strip {
+  display: none;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: var(--dsh-composer-card-max-width, 720px);
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  border: 1px dashed var(--aion-primary);
+  border-radius: 8px;
+  color: var(--aion-text-primary);
+  background-color: color-mix(in srgb, var(--aion-primary) 10%, transparent);
+}
+
+.stripActive {
+  display: flex;
+  height: 26px;
+}
+
+.stripText {
+  font-size: 12px;
+  line-height: 18px;
+}

package/src/client/styles/explorer.module.css

@@ -0,0 +1,371 @@
+/**
+ * Explorer column styles — FileManager measured values (tree row 34px, tab bar
+ * 37px, 12px baseline with 8px row padding so content lands at 20px).
+ */
+
+/* The Files/Changes tab bar: 28px buttons + 4px vertical padding + 1px border. */
+.tabBar {
+  position: relative;
+  /* Above third-party skin fixed decoration layers (z-index ~20) so the tab
+     bar buttons and the collapse chevron stay clickable (issue #169). Low
+     enough to stay below overlays/dialogs (1000+). */
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px 4px 12px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--aion-bg-3);
+  background: var(--aion-bg-1);
+}
+
+.tabBtn {
+  height: 28px;
+  padding: 0 8px;
+  border: none;
+  border-radius: 2px;
+  background: transparent;
+  color: var(--aion-text-secondary);
+  font-size: 13px;
+  font-family: var(--aion-font-sans);
+  cursor: pointer;
+  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+}
+
+.tabBtn:hover {
+  background: var(--aion-fill-2);
+}
+
+.tabBtn:active {
+  background: var(--aion-bg-active);
+}
+
+.tabBtn:focus-visible {
+  outline: 2px solid var(--aion-primary);
+  outline-offset: 2px;
+}
+
+.tabBtnActive {
+  height: 28px;
+  padding: 0 8px;
+  border: none;
+  border-radius: 2px;
+  background: var(--aion-bg-2);
+  color: var(--aion-text-primary);
+  font-size: 13px;
+  font-family: var(--aion-font-sans);
+  cursor: pointer;
+  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.tabBtnActive:active {
+  background: var(--aion-bg-active);
+}
+
+.tabBtnActive:focus-visible {
+  outline: 2px solid var(--aion-primary);
+  outline-offset: 2px;
+}
+
+/* The in-flow tab-bar icon button (maximize/restore, issue #315). */
+.tabIconBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 4px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--aion-text-secondary);
+  cursor: pointer;
+  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.tabIconBtn:hover {
+  background: var(--aion-bg-3);
+  color: var(--aion-text-primary);
+}
+
+.tabIconBtn:active {
+  background: var(--aion-bg-active);
+}
+
+.tabIconBtn:focus-visible {
+  outline: 2px solid var(--aion-primary);
+  outline-offset: 2px;
+}
+
+/* The persistent filename search area. */
+.searchArea {
+  flex-shrink: 0;
+  padding: 8px 8px 4px 12px;
+}
+
+.searchBox {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 8px;
+  border-radius: 2px;
+  background: var(--aion-bg-base);
+  border: 1px solid transparent;
+  transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.searchBoxFocus {
+  border-color: var(--aion-primary);
+}
+
+/* The inner input is focusable; mirror its focus ring onto the box. */
+.searchBox:focus-within {
+  box-shadow: 0 0 0 2px transparent, 0 0 0 4px var(--aion-primary);
+}
+
+.searchIcon {
+  display: flex;
+  align-items: center;
+  color: var(--aion-text-secondary);
+  flex-shrink: 0;
+}
+
+.searchInput {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--aion-text-primary);
+  font-size: 13px;
+  font-family: var(--aion-font-sans);
+}
+
+.searchInput::placeholder {
+  color: var(--aion-text-tertiary);
+}
+
+.searchClear {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: none;
+  border-radius: 2px;
+  background: transparent;
+  color: var(--aion-text-tertiary);
+  cursor: pointer;
+  padding: 0;
+}
+
+.searchClear:hover {
+  color: var(--aion-text-primary);
+  background: var(--aion-fill-2);
+}
+
+.searchClear:active {
+  background: var(--aion-bg-active);
+}
+
+.searchClear:focus-visible {
+  outline: 2px solid var(--aion-primary);
+  outline-offset: 2px;
+}
+
+.searchAreaFocus .searchClear {
+  display: flex;
+}
+
+/* Scroll region shared by tree and results. */
+.scrollArea {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* The file tree. Rows: 34px, full-row hover/selected, 8px padding (the
+   container adds the 12px baseline). */
+.tree {
+  padding: 2px 0 8px 12px;
+  user-select: none;
+}
+
+.treeRow {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 34px;
+  padding-right: 8px;
+  cursor: pointer;
+  border-radius: 0;
+  transition: background-color 0.12s ease;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.treeRow:hover {
+  background-color: var(--aion-fill-2);
+}
+
+.treeRow:active {
+  background-color: var(--aion-bg-active);
+}
+
+.treeRowDragging {
+  cursor: grabbing;
+  opacity: 0.55;
+}
+
+.treeRow:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--aion-primary);
+}
+
+.treeRowSelected,
+.treeRowSelected:hover {
+  background-color: var(--aion-fill-3);
+}
+
+.treeArrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  color: var(--aion-text-tertiary);
+  flex-shrink: 0;
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.treeArrowOpen {
+  transform: rotate(90deg);
+}
+
+.treeArrowEmpty {
+  visibility: hidden;
+}
+
+.treeName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  color: var(--aion-text-primary);
+}
+
+/* The row '@' button: hidden until the row is hovered/focused, inserts a
+   @<rel-path> reference into the composer draft (issue #312). */
+.refBtn {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-left: 4px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--aion-text-tertiary);
+  font-size: 13px;
+  line-height: 1;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color 0.12s ease, color 0.12s ease;
+}
+
+.treeRow:hover .refBtn,
+.refBtn:focus-visible {
+  display: flex;
+}
+
+.refBtn:hover {
+  background: var(--aion-bg-3);
+  color: var(--aion-primary);
+}
+
+.refBtn:active {
+  background: var(--aion-bg-active);
+}
+
+.refBtn:focus-visible {
+  outline: 2px solid var(--aion-primary);
+  outline-offset: 1px;
+}
+
+.treeRowSelected .treeName {
+  color: var(--aion-text-primary);
+}
+
+.treeMeta {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--aion-text-tertiary);
+  flex-shrink: 0;
+  padding-right: 4px;
+}
+
+/* Search results (flat stream). */
+.resultRow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 8px 0 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 0.12s ease;
+}
+
+.resultRow:hover {
+  background-color: var(--aion-fill-2);
+}
+
+.resultRow:active {
+  background-color: var(--aion-bg-active);
+}
+
+.resultRow:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--aion-primary);
+}
+
+.resultName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  color: var(--aion-text-primary);
+}
+
+.resultPath {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 11px;
+  color: var(--aion-text-tertiary);
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.resultMeta {
+  font-size: 11px;
+  color: var(--aion-text-tertiary);
+  flex-shrink: 0;
+}
+
+.searchStatus {
+  padding: 12px;
+  font-size: 12px;
+  color: var(--aion-text-tertiary);
+}
+
+/* Empty tree state. */
+.emptyState {
+  padding: 24px 16px;
+  font-size: 12px;
+  color: var(--aion-text-tertiary);
+  text-align: center;
+}