feat: move to npm package & small fixes

.npmrc

@@ -0,0 +1 @@
+@olly:registry=https://git.ollyhearn.ru/api/packages/olly/npm/

package-lock.json

@@ -8,9 +8,9 @@
       "name": "mcma-webui",
       "version": "1.0.0",
       "dependencies": {
+        "@olly/modern-sk": "0.1.4-3",
         "@phosphor-icons/react": "^2.1.10",
         "@reduxjs/toolkit": "^2.12.0",
-        "modern-sk": "file:./modern-sk-0.1.2.tgz",
         "react": "^19.2.6",
         "react-dom": "^19.2.6",
         "react-redux": "^9.3.0",
@@ -691,6 +691,20 @@
         "@emnapi/runtime": "^1.7.1"
       }
     },
+    "node_modules/@olly/modern-sk": {
+      "version": "0.1.4-3",
+      "resolved": "https://git.ollyhearn.ru/api/packages/olly/npm/%40olly%2Fmodern-sk/-/0.1.4-3/modern-sk-0.1.4-3.tgz",
+      "integrity": "sha512-h+d+Jd3DBr7d51V78p1Eb5rVrpN4PAskwQFnh2X4Dk7Q8oajiMVJuhZU1amx97bKHFDHgcOfhwc4cS8P4tFCmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@phosphor-icons/react": "^2.1.10",
+        "radix-ui": "^1.4.3"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/@phosphor-icons/react": {
       "version": "2.1.10",
       "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.10.tgz",
@@ -2464,9 +2478,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2481,9 +2492,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2498,9 +2506,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2515,9 +2520,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2818,9 +2820,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2838,9 +2837,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2858,9 +2854,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2878,9 +2871,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3707,9 +3697,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -3731,9 +3718,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -3755,9 +3739,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -3779,9 +3760,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -3877,20 +3855,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/modern-sk": {
-      "version": "0.1.2",
-      "resolved": "file:modern-sk-0.1.2.tgz",
-      "integrity": "sha512-tKSxbtUxT0CLkGc8DK+SABlVmKsMqqQr61uvAJ8EDcrutzm+VD230hTRVzk9hp2oSo6nXeeMig7KS8v0Lz5mWw==",
-      "license": "MIT",
-      "dependencies": {
-        "@phosphor-icons/react": "^2.1.10",
-        "radix-ui": "^1.4.3"
-      },
-      "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",

package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@phosphor-icons/react": "^2.1.10",
     "@reduxjs/toolkit": "^2.12.0",
-    "modern-sk": "file:./modern-sk-0.1.2.tgz",
+    "@olly/modern-sk": "0.1.4-3",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-redux": "^9.3.0",

src/components/common/ConnectionStatus.tsx

@@ -1,4 +1,4 @@
-import { Badge, Tooltip } from 'modern-sk';
+import { Badge, Tooltip } from '@olly/modern-sk';
 import { useConnectionStatus } from '../../hooks/useConnectionStatus';
 import { getApiBaseUrl } from '../../config/runtime-config';
 

src/components/common/ErrorState.tsx

@@ -1,4 +1,4 @@
-import { Callout, Button } from 'modern-sk';
+import { Callout, Button } from '@olly/modern-sk';
 
 interface ErrorStateProps {
   message?: string;

src/components/player/PersistentPlayer.tsx

@@ -1,4 +1,4 @@
-import { Slider } from 'modern-sk';
+import { Slider } from '@olly/modern-sk';
 import { Icon } from '../common/Icon';
 import { ArtTile } from '../common/ArtTile';
 import { useAppDispatch, useAppSelector } from '../../hooks/useAppDispatch';

src/components/player/QueuePanel.tsx

@@ -1,4 +1,4 @@
-import { Slider, Badge } from 'modern-sk';
+import { Slider, Badge } from '@olly/modern-sk';
 import { Icon } from '../common/Icon';
 import { ArtTile } from '../common/ArtTile';
 import { useAppDispatch, useAppSelector } from '../../hooks/useAppDispatch';

src/components/track/AvailabilityBadge.tsx

@@ -1,4 +1,4 @@
-import { Badge, Tooltip } from 'modern-sk';
+import { Badge, Tooltip } from '@olly/modern-sk';
 import type { TrackAvailability } from '../../api/types';
 
 interface Props {

src/components/track/TrackContextMenu.tsx

@@ -5,7 +5,7 @@ import {
   MenuItem,
   MenuSeparator,
   IconButton,
-} from 'modern-sk';
+} from '@olly/modern-sk';
 import { useAppDispatch } from '../../hooks/useAppDispatch';
 import { addToQueue, addNextInQueue } from '../../store/slices/queue';
 import { play } from '../../store/slices/player';

src/components/track/TrackRow.tsx

@@ -1,4 +1,4 @@
-import { Row } from 'modern-sk';
+import { Row } from '@olly/modern-sk';
 import { TrackContextMenu } from './TrackContextMenu';
 import { AvailabilityBadge } from './AvailabilityBadge';
 import { formatDuration } from '../../lib/format';

src/features/admin/AdminPage.tsx

@@ -1,4 +1,4 @@
-import { Window } from 'modern-sk';
+import { Window } from '@olly/modern-sk';
 export function AdminPage() {
   return (
     <div style={{ padding: '1.5rem' }}>

src/features/album-detail/AlbumDetailPage.tsx

@@ -1,5 +1,5 @@
 import { useParams, useNavigate } from 'react-router';
-import { ScrollArea, IconButton, Button } from 'modern-sk';
+import { ScrollArea, IconButton, Button } from '@olly/modern-sk';
 import {
   useGetAlbumQuery,
   useGetAlbumTracksQuery,

src/features/connect/ConnectPage.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
-import { Card, TextField, Button, Callout, Badge } from 'modern-sk';
+import { Card, TextField, Button, Callout, Badge } from '@olly/modern-sk';
 import { Icon } from '../../components/common/Icon';
 import { useAppDispatch } from '../../hooks/useAppDispatch';
 import { setTokens, setUser } from '../../store/slices/auth';

src/features/downloads-manager/DownloadsManagerPage.tsx

@@ -1,4 +1,4 @@
-import { Window } from 'modern-sk';
+import { Window } from '@olly/modern-sk';
 export function DownloadsManagerPage() {
   return (
     <div style={{ padding: '1.5rem' }}>

src/features/home/HomePage.tsx

@@ -42,7 +42,7 @@ import {
   AlertDialog,
   Window,
   useTheme,
-} from 'modern-sk';
+} from '@olly/modern-sk';
 
 const sectionStyle: React.CSSProperties = {
   display: 'flex',

src/features/library/LibraryPage.tsx

@@ -7,7 +7,7 @@ import {
   SearchField,
   ScrollArea,
   Card,
-} from 'modern-sk';
+} from '@olly/modern-sk';
 import {
   useGetTracksQuery,
   useGetAlbumsQuery,

src/features/playlist-detail/PlaylistDetailPage.tsx

@@ -1,5 +1,5 @@
 import { useParams, useNavigate } from 'react-router';
-import { ScrollArea, IconButton, Button } from 'modern-sk';
+import { ScrollArea, IconButton, Button } from '@olly/modern-sk';
 import {
   useGetPlaylistQuery,
   useGetPlaylistTracksQuery,

src/features/search-download/SearchDownloadPage.tsx

@@ -1,4 +1,4 @@
-import { Window } from 'modern-sk';
+import { Window } from '@olly/modern-sk';
 export function SearchDownloadPage() {
   return (
     <div style={{ padding: '1.5rem' }}>

src/features/settings/SettingsPage.tsx

@@ -1,4 +1,4 @@
-import { Window } from 'modern-sk';
+import { Window } from '@olly/modern-sk';
 export function SettingsPage() {
   return (
     <div style={{ padding: '1.5rem' }}>

src/features/storage/StoragePage.tsx

@@ -1,4 +1,4 @@
-import { Window } from 'modern-sk';
+import { Window } from '@olly/modern-sk';
 export function StoragePage() {
   return (
     <div style={{ padding: '1.5rem' }}>

src/index.tsx

@@ -1,12 +1,12 @@
-import 'modern-sk/styles.css';
+import '@olly/modern-sk/styles.css';
-import 'modern-sk/fonts.css';
+import '@olly/modern-sk/fonts.css';
 import './styles/global.css';
 import './styles/shell.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router';
-import { ThemeProvider, TooltipProvider } from 'modern-sk';
+import { ThemeProvider, TooltipProvider } from '@olly/modern-sk';
 import { store } from './store';
 import { AppRoutes } from './routes';
 

src/styles/shell.css

@@ -53,12 +53,14 @@
   display: flex;
   flex-direction: column;
   min-height: 0;
+  overflow-x: hidden;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.22));
   border-right: 1px solid var(--hair);
 }
 .sb-scroll {
   flex: 1;
   min-height: 0; /* allow scroll inside the column flex so .sb-foot stays pinned */
+  overflow-x: hidden;
   overflow-y: auto;
   padding: 14px 12px 6px;
 }
@@ -90,6 +92,8 @@
   align-items: center;
   gap: 11px;
   width: 100%;
+  box-sizing: border-box;
+  min-width: 0;
   padding: 8px 10px;
   border-radius: var(--r-md);
   font-size: 14px;
@@ -107,6 +111,14 @@
 .nav-item .ph {
   font-size: 18px;
   color: var(--fg-3);
+  flex-shrink: 0;
+}
+.nav-item > span {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .nav-item:hover {
   background: rgba(255, 255, 255, 0.04);
@@ -150,6 +162,8 @@
   align-items: center;
   gap: 9px;
   width: 100%;
+  box-sizing: border-box;
+  min-width: 0;
   padding: 6px 10px;
   border-radius: var(--r-md);
   font-size: 13px;
@@ -263,9 +277,11 @@
 
 /* connection status pill (used in sidebar foot) */
 .conn {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: 7px;
+  width: 100%;
+  box-sizing: border-box;
   padding: 5px 11px 5px 9px;
   border-radius: var(--r-pill);
   font-size: 12px;