fix: update ESLint rules for react-hooks and improve file style resolution logic

aesopov · aesopov · commit e655d663a5de · 2026-05-05T09:05:22.000+03:00
diff --git a/.github/workflows/publish-ui.yml b/.github/workflows/publish-ui.yml
@@ -15,60 +15,8 @@ permissions:
   contents: read
 
 jobs:
-  publish-fss:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - uses: pnpm/action-setup@v5
-
-      - uses: actions/setup-node@v6
-        with:
-          node-version: 24
-          cache: pnpm
-          registry-url: https://registry.npmjs.org
-        env:
-          NPM_CONFIG_CACHE: ${{ github.workspace }}/.npm-cache
-
-      - run: pnpm install --frozen-lockfile
-        env:
-          NPM_CONFIG_CACHE: ${{ github.workspace }}/.npm-cache
-
-      - name: Check npm version
-        id: version_check
-        shell: bash
-        env:
-          NPM_CONFIG_CACHE: ${{ github.workspace }}/.npm-cache
-        run: |
-          PACKAGE_NAME=$(node -p "require('./packages/fss/package.json').name")
-          PACKAGE_VERSION=$(node -p "require('./packages/fss/package.json').version")
-          PUBLISHED_VERSION=$(npm view "$PACKAGE_NAME" version 2>/dev/null || true)
-
-          echo "package_name=$PACKAGE_NAME" >> "$GITHUB_OUTPUT"
-          echo "package_version=$PACKAGE_VERSION" >> "$GITHUB_OUTPUT"
-
-          if [ "$PUBLISHED_VERSION" = "$PACKAGE_VERSION" ]; then
-            echo "should_publish=false" >> "$GITHUB_OUTPUT"
-            echo "Version $PACKAGE_VERSION is already published for $PACKAGE_NAME."
-          else
-            echo "should_publish=true" >> "$GITHUB_OUTPUT"
-            if [ -n "$PUBLISHED_VERSION" ]; then
-              echo "Publishing $PACKAGE_NAME@$PACKAGE_VERSION over current npm version $PUBLISHED_VERSION."
-            else
-              echo "Publishing first npm release for $PACKAGE_NAME@$PACKAGE_VERSION."
-            fi
-          fi
-
-      - name: Publish fss package
-        if: steps.version_check.outputs.should_publish == 'true'
-        run: pnpm publish --access public --no-git-checks
-        working-directory: packages/fss
-        env:
-          NPM_CONFIG_CACHE: ${{ github.workspace }}/.npm-cache
-
   publish-extension-api:
     runs-on: ubuntu-latest
-    needs: publish-fss
     steps:
       - uses: actions/checkout@v6
 
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -49,10 +49,23 @@ export default tseslint.config(
         },
       ],
       "@typescript-eslint/no-explicit-any": "off",
-      "react-hooks/exhaustive-deps": "warn",
+      "react-hooks/exhaustive-deps": ["warn", {
+        additionalHooks: "(useLatestRef)",
+      }],
       "react-hooks/rules-of-hooks": "error",
     },
   },
+  {
+    files: [
+      "packages/ui/lib/components/PanelGroup/**",
+      "packages/ui/lib/features/**",
+      "packages/ui/lib/dialogs/**",
+      "packages/ui/lib/hooks/**",
+    ],
+    rules: {
+      "react-hooks/exhaustive-deps": "off",
+    },
+  },
   {
     files: ["eslint.config.mjs", "vite.config.ts", "packages/*/vite.config.ts"],
     languageOptions: {
diff --git a/packages/file-list/package.json b/packages/file-list/package.json
@@ -53,7 +53,7 @@
   },
   "dependencies": {
     "@dotdirfm/commands": "workspace:*",
-    "@dotdirfm/fss-lang": "workspace:*",
+    "@dotdirfm/fss": "workspace:*",
     "@dotdirfm/ui-utils": "workspace:*"
   },
   "packageManager": "pnpm@10.30.3",
diff --git a/packages/file-list/src/FileList/FileInfoFooter.tsx b/packages/file-list/src/FileList/FileInfoFooter.tsx
@@ -1,4 +1,4 @@
-import type { FsNode } from "@dotdirfm/fss-lang";
+import type { FsNode } from "@dotdirfm/fss";
 import styles from "./FileList.module.css";
 
 function formatSize(sizeValue: unknown): string {
diff --git a/packages/file-list/src/FileList/FileList.tsx b/packages/file-list/src/FileList/FileList.tsx
@@ -1,9 +1,9 @@
-import { ActionQueue } from "./actionQueue";
-import { cx, dirname, join, useMediaQuery } from "@dotdirfm/ui-utils";
 import { SHELL_EXECUTE, useCommandRegistry, VIEW_FILE } from "@dotdirfm/commands";
-import type { FsNode } from "@dotdirfm/fss-lang";
+import type { FsNode } from "@dotdirfm/fss";
+import { cx, dirname, join, useMediaQuery } from "@dotdirfm/ui-utils";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Breadcrumbs } from "../Breadcrumbs/Breadcrumbs";
+import { ActionQueue } from "./actionQueue";
 import { ColumnsScroller, type ColumnsScrollerProps } from "./ColumnsScroller";
 import { FileInfoFooter } from "./FileInfoFooter";
 import styles from "./FileList.module.css";
diff --git a/packages/file-list/src/FileList/fileListActions.ts b/packages/file-list/src/FileList/fileListActions.ts
@@ -1,7 +1,7 @@
-import type { ActionQueue } from "./actionQueue";
 import { EDIT_FILE, SHELL_EXECUTE, useCommandRegistry, VIEW_FILE } from "@dotdirfm/commands";
-import type { FsNode } from "@dotdirfm/fss-lang";
+import type { FsNode } from "@dotdirfm/fss";
 import { useMemo, useRef } from "react";
+import type { ActionQueue } from "./actionQueue";
 import type { FileOperationHandlers, LanguageResolver } from "./types";
 
 type DisplayEntry = {
diff --git a/packages/file-list/src/FileList/types.ts b/packages/file-list/src/FileList/types.ts
@@ -1,4 +1,4 @@
-import type { FsNode } from "@dotdirfm/fss-lang";
+import type { FsNode } from "@dotdirfm/fss";
 import type { ReactNode } from "react";
 
 export interface ResolvedEntryStyle {
diff --git a/packages/fss/README.md b/packages/fss/README.md
@@ -30,7 +30,7 @@ npm install fss-lang
 ## Quick Start
 
 ```typescript
-import { parseStylesheet, resolveStyle, createFsNode, StateFlags } from '@dotdirfm/fss-lang'
+import { parseStylesheet, resolveStyle, createFsNode, StateFlags } from '@dotdirfm/fss'
 
 // Parse an FSS stylesheet
 const sheet = parseStylesheet(`
@@ -81,7 +81,7 @@ const style = resolveStyle(sheet, node, 'dark')
 For large trees (10k+ nodes), use `CachedResolver` to avoid recomputing styles for nodes with identical signatures:
 
 ```typescript
-import { CachedResolver, parseStylesheet } from '@dotdirfm/fss-lang'
+import { CachedResolver, parseStylesheet } from '@dotdirfm/fss'
 
 const sheet = parseStylesheet(`...`)
 const resolver = new CachedResolver(sheet, 'dark')
@@ -98,7 +98,7 @@ resolver.setTheme('light')
 Support global config with per-folder overrides (e.g. `.faraday/style.fss`):
 
 ```typescript
-import { LayeredResolver, createLayer, LayerPriority } from '@dotdirfm/fss-lang'
+import { LayeredResolver, createLayer, LayerPriority } from '@dotdirfm/fss'
 
 const resolver = new LayeredResolver()
 
diff --git a/packages/fss/package.json b/packages/fss/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@dotdirfm/fss-lang",
+  "name": "@dotdirfm/fss",
   "type": "module",
   "version": "0.0.6",
   "description": "File Style Sheets — a CSS-like language for describing how files should be rendered in a tree or panel.",
diff --git a/packages/ui/lib/components/PanelGroup/usePanelCommands.ts b/packages/ui/lib/components/PanelGroup/usePanelCommands.ts
@@ -2,6 +2,7 @@ import { OPPOSITE_PANEL } from "@/entities/panel/model/panelSide";
 import type { PanelSide } from "@/entities/panel/model/types";
 import { createFilelistTab, createPreviewTab } from "@/entities/tab/model/tabsAtoms";
 import type { PanelTab } from "@/entities/tab/model/types";
+import { useLatestRef } from "@/hooks/useLatestRef";
 import {
     CLOSE_TAB,
     EDIT_IN_OPPOSITE_PANEL,
@@ -12,8 +13,7 @@ import {
     OPEN_SELECTED_DIR_IN_OPPOSITE_PANEL_NEW_TAB,
     PREVIEW_IN_OPPOSITE_PANEL, useCommandRegistry
 } from "@dotdirfm/commands";
-import type { FsNode } from "@dotdirfm/fss-lang";
-import { useLatestRef } from "@/hooks/useLatestRef";
+import type { FsNode } from "@dotdirfm/fss";
 import { useEffect, type Dispatch, type RefObject, type SetStateAction } from "react";
 
 interface UsePanelCommandsArgs {
diff --git a/packages/ui/lib/components/QuickSearchView/QuickSearchView.tsx b/packages/ui/lib/components/QuickSearchView/QuickSearchView.tsx
@@ -1,6 +1,6 @@
+import type { FsNode } from "@dotdirfm/fss";
 import { useCallback, useState, type CSSProperties } from "react";
 import { VscArrowDown, VscArrowUp, VscChevronLeft, VscRegex } from "react-icons/vsc";
-import type { FsNode } from "@dotdirfm/fss-lang";
 
 export interface QuickSearchViewProps {
   onBack: () => void;
diff --git a/packages/ui/lib/entities/tab/model/types.ts b/packages/ui/lib/entities/tab/model/types.ts
@@ -1,4 +1,4 @@
-import type { FsNode } from "@dotdirfm/fss-lang";
+import type { FsNode } from "@dotdirfm/fss";
 
 export type FileListTabState = {
   path: string;
diff --git a/packages/ui/lib/features/fss/fileStyleResolver.tsx b/packages/ui/lib/features/fss/fileStyleResolver.tsx
@@ -1,12 +1,12 @@
 import { systemThemeAtom } from "@/atoms";
-import { useBridge } from "@dotdirfm/ui-bridge";
 import { useResolveIcon } from "@/features/file-icons/iconResolver";
 import { FileSystemObserver, useFileSystemWatchRegistry, type FileSystemChangeRecord } from "@/features/file-system/fs";
 import { createPanelResolver, invalidateFssCache, resolveEntryStyle, syncLayers, useExtensionFssLayers } from "@/features/fss/fss";
 import type { FilePresentation } from "@/features/fss/types";
-import { basename, dirname, join, normalizePath } from "@dotdirfm/ui-utils";
-import type { FsNode } from "@dotdirfm/fss-lang";
-import { createFsNode } from "@dotdirfm/fss-lang/helpers";
+import type { FsNode } from "@dotdirfm/fss";
+import { createFsNode } from "@dotdirfm/fss/helpers";
+import { useBridge } from "@dotdirfm/ui-bridge";
+import { basename, dirname, isRootPath, join, normalizePath } from "@dotdirfm/ui-utils";
 import { useAtomValue } from "jotai";
 import {
     createContext,
@@ -179,7 +179,7 @@ export function FileStyleResolverProvider({ path, pathKind = "directory", childr
       const style = resolveEntryStyle(resolverRef.current, node);
       const presentation = {
         style,
-        icon: resolveIcon(node.name, node.type === "folder", false, node.parent == null, node.lang, style.icon),
+        icon: resolveIcon(node.name, node.type === "folder", false, isRootPath(node.path ?? ""), node.lang, style.icon),
       };
       presentationCacheRef.current.set(key, presentation);
       return presentation;
diff --git a/packages/ui/lib/features/fss/fss.tsx b/packages/ui/lib/features/fss/fss.tsx
@@ -1,10 +1,10 @@
-import type { Bridge } from "@dotdirfm/ui-bridge";
 import { extensionIconThemes, extensionRef, type LoadedExtension } from "@/features/extensions/types";
 import { readFileText } from "@/features/file-system/fs";
 import type { ResolvedEntryStyle } from "@/features/fss/types";
+import type { FsNode } from "@dotdirfm/fss";
+import { createLayer, LayeredResolver, LayerPriority, type StyleLayer, type ThemeKind } from "@dotdirfm/fss";
+import type { Bridge } from "@dotdirfm/ui-bridge";
 import { basename, dirname, join, normalizePath } from "@dotdirfm/ui-utils";
-import type { FsNode } from "@dotdirfm/fss-lang";
-import { createLayer, LayeredResolver, LayerPriority, type StyleLayer, type ThemeKind } from "@dotdirfm/fss-lang";
 import { createContext, createElement, useCallback, useContext, useMemo, useState, type ReactNode } from "react";
 
 const defaultFss = `
diff --git a/packages/ui/lib/features/panels/useFileListPanel.ts b/packages/ui/lib/features/panels/useFileListPanel.ts
@@ -8,18 +8,17 @@
 
 import { useDialog } from "@/dialogs/dialogContext";
 import type { FileListTabState } from "@/entities/tab/model/types";
-import type { Bridge, FsChangeType, FsEntry } from "@dotdirfm/ui-bridge";
-import { useBridge } from "@dotdirfm/ui-bridge";
 import { loadFsProvider } from "@/features/extensions/browserFsProvider";
 import { FileSystemObserver, useFileSystemWatchRegistry, type FileSystemChangeRecord, type HandleMeta } from "@/features/file-system/fs";
 import { useLanguageRegistry } from "@/features/languages/languageRegistry";
-import { buildContainerPath, isContainerPath, parseContainerPath } from "@dotdirfm/ui-utils";
-import { basename, dirname, isFileExecutable, isRootPath, join } from "@dotdirfm/ui-utils";
+import { useLatestRef } from "@/hooks/useLatestRef";
 import { useFsProviderRegistry } from "@/viewerEditorRegistry";
 import type { FsProviderEntry } from "@dotdirfm/extension-api";
-import type { FsNode } from "@dotdirfm/fss-lang";
-import { createFsNode } from "@dotdirfm/fss-lang/helpers";
-import { useLatestRef } from "@/hooks/useLatestRef";
+import type { FsNode } from "@dotdirfm/fss";
+import { createFsNode } from "@dotdirfm/fss/helpers";
+import type { Bridge, FsChangeType, FsEntry } from "@dotdirfm/ui-bridge";
+import { useBridge } from "@dotdirfm/ui-bridge";
+import { basename, buildContainerPath, dirname, isContainerPath, isFileExecutable, isRootPath, join, parseContainerPath } from "@dotdirfm/ui-utils";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 // ── Helper functions ──────────────────────────────────────────────────────────
@@ -225,7 +224,8 @@ export function useFileListPanel() {
             const parent = buildParentChain(path);
             const rawEntries = await bridge.fs.entries(path);
             if (abort.signal.aborted) return;
-            const nodes = rawEntries.map((entry) => entryToFsNode(entry, path, languageRegistry, parent));
+            const nodesParent = parent ?? createFsNode({ name: "/", type: "folder", path });
+            const nodes = rawEntries.map((entry) => entryToFsNode(entry, path, languageRegistry, nodesParent));
             if (abort.signal.aborted) return;
             updateState(parent, nodes);
             setupWatches(path);
diff --git a/packages/ui/lib/processes/workspace-session/model/useWorkspaceSessionProcess.ts b/packages/ui/lib/processes/workspace-session/model/useWorkspaceSessionProcess.ts
@@ -1,10 +1,10 @@
 import { activePanelSideAtom, genTabId, leftActiveIndexAtom, leftActiveTabIdAtom, leftTabsAtom, rightActiveIndexAtom, rightActiveTabIdAtom, rightTabsAtom } from "@/entities/tab/model/tabsAtoms";
 import type { PanelTab } from "@/entities/tab/model/types";
-import { useBridge } from "@dotdirfm/ui-bridge";
 import type { DotDirWindowLayout, PanelPersistedState, PersistedTab } from "@/features/ui-state/types";
 import { useUiState } from "@/features/ui-state/uiState";
+import type { FsNode } from "@dotdirfm/fss";
+import { useBridge } from "@dotdirfm/ui-bridge";
 import { basename, dirname, join } from "@dotdirfm/ui-utils";
-import type { FsNode } from "@dotdirfm/fss-lang";
 import { useAtomValue, useSetAtom } from "jotai";
 import type { Dispatch, SetStateAction } from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -58,7 +58,7 @@
     "@dotdirfm/commands": "workspace:*",
     "@dotdirfm/extension-api": "workspace:*",
     "@dotdirfm/file-list": "workspace:*",
-    "@dotdirfm/fss-lang": "workspace:*",
+    "@dotdirfm/fss": "workspace:*",
     "@dotdirfm/ui-bridge": "workspace:*",
     "@dotdirfm/ui-focus": "workspace:*",
     "@dotdirfm/ui-utils": "workspace:*",
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
@@ -18,8 +18,6 @@ export default defineConfig({
     },
     rolldownOptions: {
       external: [
-        "@dotdirfm/commands",
-        "@dotdirfm/fss-lang",
         "react",
         "react/jsx-runtime",
         "react-dom",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,7 +1,6 @@
-import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
 
-// @ts-expect-error process is a nodejs global
 const host = process.env.TAURI_DEV_HOST;
 
 // https://vite.dev/config/

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { FsNode } from "@dotdirfm/fss-lang";`
	`1`	`+import type { FsNode } from "@dotdirfm/fss";`
`2`	`2`	`import styles from "./FileList.module.css";`
`3`	`3`
`4`	`4`	`function formatSize(sizeValue: unknown): string {`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "name": "@dotdirfm/fss-lang",`
	`2`	`+ "name": "@dotdirfm/fss",`
`3`	`3`	`"type": "module",`
`4`	`4`	`"version": "0.0.6",`
`5`	`5`	`"description": "File Style Sheets — a CSS-like language for describing how files should be rendered in a tree or panel.",`