css migrations, vitest config updates

Author: gallayl

.yarnrc.yml

@@ -11,6 +11,6 @@ nodeLinker: node-modules
 plugins:
   - checksum: 26e8fe1580b68848fd4498cd646f44a38bfee77658c4678777003ff5ff01977e4113cf01a3809aa2727a46aa5342d2afe8dbe610800da3b6850f74af7d0ab1fa
     path: .yarn/plugins/@yarnpkg/plugin-changelog.cjs
-    spec: "https://raw.githubusercontent.com/furystack/furystack/refs/heads/develop/packages/yarn-plugin-changelog/bundles/%40yarnpkg/plugin-changelog.js"
+    spec: 'https://raw.githubusercontent.com/furystack/furystack/refs/heads/develop/packages/yarn-plugin-changelog/bundles/%40yarnpkg/plugin-changelog.js'
 
 yarnPath: .yarn/releases/yarn-4.12.0.cjs

frontend/src/components/header.tsx

@@ -12,26 +12,22 @@ const AppBarLink = styledShade(ShadeAppBarLink, {
 
 export const Header = Shade({
   shadowDomName: 'shade-app-header',
+  css: {
+    position: 'absolute',
+    top: '-42px',
+    transition: 'top 0.3s ease-in-out',
+    '&:hover': { top: '0' },
+    '&.scrolled': { top: '0' },
+  },
   render: ({ useDisposable, injector, element }) => {
     const scrollService = injector.getInstance(ScrollService)
 
     useDisposable('scrollListener', () =>
       scrollService.subscribe('onScroll', ({ top }) => {
-        element.style.top = top ? '0' : '-42px'
+        element.classList.toggle('scrolled', top)
       }),
     )
 
-    element.onmouseleave = () => {
-      element.style.top = '-42px'
-    }
-
-    element.onmouseenter = () => {
-      element.style.top = '0'
-    }
-
-    element.style.position = 'absolute'
-    element.style.transition = 'top 0.3s ease-in-out'
-
     return (
       <AppBar id="header">
         <AppBarLink title="JSON Tools" href="/">

frontend/src/components/json-schema-selector.tsx

@@ -10,6 +10,12 @@ type JsonSchemaSelectorProps = {
 
 export const JsonSchemaSelector = Shade<JsonSchemaSelectorProps>({
   shadowDomName: 'shade-json-schema-selector',
+  css: {
+    '& .material-symbols-outlined': {
+      fontSize: '1.15em',
+      marginRight: '8px',
+    },
+  },
   render: ({ props, useDisposable }) => {
     const isVisible = useDisposable('isVisible', () => new ObservableValue(false))
     const value = useDisposable('value', () => new ObservableValue(props.schema))
@@ -23,9 +29,7 @@ export const JsonSchemaSelector = Shade<JsonSchemaSelectorProps>({
             isVisible.setValue(true)
           }}
         >
-          <i className="material-symbols-outlined" style={{ fontSize: '1.15em', marginRight: '8px' }}>
-            data_object
-          </i>
+          <i className="material-symbols-outlined">data_object</i>
           Schema
         </Button>
         <Modal

frontend/src/components/layout.tsx

@@ -5,22 +5,26 @@ import { Header } from './header.js'
 
 export const Layout = Shade({
   shadowDomName: 'shade-app-layout',
+  css: {
+    '& #Layout': {
+      position: 'fixed',
+      top: '0',
+      left: '0',
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      lineHeight: '1.6',
+      overflow: 'hidden',
+      padding: '0',
+      margin: '0',
+    },
+  },
   render: ({ injector }) => {
     return (
       <div
         id="Layout"
         style={{
-          position: 'fixed',
-          top: '0',
-          left: '0',
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          lineHeight: '1.6',
-          overflow: 'hidden',
-          padding: '0',
-          margin: '0',
           background: injector.getInstance(ThemeProviderService).theme.background.default,
         }}
       >

frontend/src/components/share-button.tsx

@@ -3,6 +3,12 @@ import { Button, NotyService } from '@furystack/shades-common-components'
 
 export const ShareButton = Shade({
   shadowDomName: 'shade-share-button',
+  css: {
+    '& .material-symbols-outlined': {
+      fontSize: 'inherit',
+      marginRight: '8px',
+    },
+  },
   render: ({ injector }) => {
     return (
       <Button
@@ -26,15 +32,7 @@ export const ShareButton = Shade({
           })
         }}
       >
-        <i
-          style={{
-            fontSize: 'inherit',
-            marginRight: '8px',
-          }}
-          className="material-symbols-outlined"
-        >
-          share
-        </i>
+        <i className="material-symbols-outlined">share</i>
         Share
       </Button>
     )

frontend/src/components/theme-switch/index.tsx

@@ -1,10 +1,20 @@
 import { createComponent, Shade } from '@furystack/shades'
 import type { ButtonProps } from '@furystack/shades-common-components'
-import { getCssVariable } from '@furystack/shades-common-components'
-import { Button, defaultDarkTheme, defaultLightTheme, ThemeProviderService } from '@furystack/shades-common-components'
+import {
+  Button,
+  defaultDarkTheme,
+  defaultLightTheme,
+  getCssVariable,
+  ThemeProviderService,
+} from '@furystack/shades-common-components'
 
 export const ThemeSwitch = Shade<Omit<ButtonProps, 'onclick'>>({
   shadowDomName: 'theme-switch',
+  css: {
+    '& .material-symbols-outlined': {
+      fontSize: '1.27em',
+    },
+  },
   render: ({ props, injector, useStoredState }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
     const [theme, setTheme] = useStoredState<'light' | 'dark'>(
@@ -21,13 +31,9 @@ export const ThemeSwitch = Shade<Omit<ButtonProps, 'onclick'>>({
         }}
       >
         {theme === 'dark' ? (
-          <i style={{ fontSize: '1.27em' }} className="material-symbols-outlined">
-            light_mode
-          </i>
+          <i className="material-symbols-outlined">light_mode</i>
         ) : (
-          <i style={{ fontSize: '1.27em' }} className="material-symbols-outlined">
-            dark_mode
-          </i>
+          <i className="material-symbols-outlined">dark_mode</i>
         )}
       </Button>
     )

frontend/src/pages/compare.tsx

@@ -5,6 +5,21 @@ import { ShareButton } from '../components/share-button.js'
 
 export const ComparePage = Shade({
   shadowDomName: 'shade-compare-page',
+  css: {
+    '& .page-container': {
+      position: 'fixed',
+      height: '100%',
+      width: '100%',
+    },
+    '& .actions': {
+      position: 'fixed',
+      bottom: '0',
+      right: '0',
+      zIndex: '100',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+    },
+  },
   render: ({ injector, useObservable, element }) => {
     const locationService = injector.getInstance(LocationService)
 
@@ -42,13 +57,7 @@ export const ComparePage = Shade({
     )
 
     return (
-      <div
-        style={{
-          position: 'fixed',
-          height: '100%',
-          width: '100%',
-        }}
-      >
+      <div className="page-container">
         <MonacoDiffEditor
           originalValue={original}
           modifiedValue={modified}
@@ -63,16 +72,7 @@ export const ComparePage = Shade({
             } as any
           }
         />
-        <div
-          style={{
-            position: 'fixed',
-            bottom: '0',
-            right: '0',
-            zIndex: '100',
-            alignItems: 'center',
-            justifyContent: 'flex-end',
-          }}
-        >
+        <div className="actions">
           <ShareButton />
         </div>
       </div>

frontend/src/pages/validate.tsx

@@ -7,6 +7,21 @@ import { MonacoModelProvider } from '../services/monaco-model-provider.js'
 
 export const ValidatePage = Shade({
   shadowDomName: 'shade-validate-page',
+  css: {
+    '& .page-container': {
+      position: 'fixed',
+      height: '100%',
+      width: '100%',
+    },
+    '& .actions': {
+      position: 'fixed',
+      bottom: '0',
+      right: '0',
+      zIndex: '100',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+    },
+  },
   render: ({ injector, useObservable, element, useSearchState }) => {
     const locationService = injector.getInstance(LocationService)
     const modelProvider = injector.getInstance(MonacoModelProvider)
@@ -58,13 +73,7 @@ export const ValidatePage = Shade({
       : undefined
 
     return (
-      <div
-        style={{
-          position: 'fixed',
-          height: '100%',
-          width: '100%',
-        }}
-      >
+      <div className="page-container">
         <MonacoEditor
           value={value}
           onValueChange={(newValue) => setValue(newValue)}
@@ -77,16 +86,7 @@ export const ValidatePage = Shade({
           }}
         />
 
-        <div
-          style={{
-            position: 'fixed',
-            bottom: '0',
-            right: '0',
-            zIndex: '100',
-            alignItems: 'center',
-            justifyContent: 'flex-end',
-          }}
-        >
+        <div className="actions">
           <JsonSchemaSelector
             schema={jsonSchema}
             onSchemaChange={(schema) => {

frontend/src/services/monaco-model-provider.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@furystack/inject'
-import { Uri, languages } from 'monaco-editor/esm/vs/editor/editor.api.js'
+import { Uri } from 'monaco-editor/esm/vs/editor/editor.api.js'
+import { json } from 'monaco-editor/esm/vs/editor/editor.main.js'
 
 @Injectable({ lifetime: 'singleton' })
 export class MonacoModelProvider {
@@ -10,13 +11,13 @@ export class MonacoModelProvider {
       return this.nameUriCache.get(schemaName) as Uri
     }
     const modelUri = Uri.parse(`furystack://json-tools/model-schemas-${schemaName}.json`)
-    languages.json.jsonDefaults.setDiagnosticsOptions({
+    json.jsonDefaults.setDiagnosticsOptions({
       validate: true,
       enableSchemaRequest: true,
       schemaRequest: 'warning',
       schemaValidation: 'error',
       schemas: [
-        ...(languages.json.jsonDefaults.diagnosticsOptions.schemas || []),
+        ...(json.jsonDefaults.diagnosticsOptions.schemas || []),
         {
           uri: `furystack://json-tools/model-schemas-${schemaName}.json`,
           fileMatch: [modelUri.toString()],

package.json

@@ -17,6 +17,7 @@
     "@furystack/yarn-plugin-changelog": "^1.0.2",
     "@playwright/test": "^1.58.1",
     "@types/node": "^25.2.0",
+    "@vitest/coverage-istanbul": "4.0.18",
     "@vitest/coverage-v8": "^4.0.18",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",