furystack · gallayl · Mar 7, 2026 · Mar 7, 2026 · Mar 7, 2026 · Mar 7, 2026
diff --git a/.cursor/rules/CODE_STYLE.mdc b/.cursor/rules/CODE_STYLE.mdc
@@ -217,7 +217,7 @@ type MyComponentProps = {
 
 // 3. Component
 export const MyComponent = Shade<MyComponentProps>({
-  shadowDomName: 'my-component',
+  customElementName: 'my-component',
   render: ({ props }) => {
     return <div>{props.title}</div>;
   },

diff --git a/.cursor/rules/TYPESCRIPT_GUIDELINES.mdc b/.cursor/rules/TYPESCRIPT_GUIDELINES.mdc
@@ -94,7 +94,7 @@ type MonacoEditorProps = {
 };
 
 export const MonacoEditor = Shade<MonacoEditorProps>({
-  shadowDomName: 'monaco-editor',
+  customElementName: 'monaco-editor',
   render: ({ props }) => {
     return (
       <div data-testid="editor">

diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1 @@
+npx lint-staged
diff --git a/.yarn/changelogs/frontend.db4b6049.md b/.yarn/changelogs/frontend.db4b6049.md
@@ -0,0 +1,40 @@
+<!-- version-type: patch -->
+# frontend
+
+<!--
+FORMATTING GUIDE:
+
+### Detailed Entry (appears first when merging)
+
+Use h3 (###) and below for detailed entries with paragraphs, code examples, and lists.
+
+### Simple List Items
+
+- Simple changes can be added as list items
+- They are collected together at the bottom of each section
+
+TIP: When multiple changelog drafts are merged, heading-based entries
+appear before simple list items within each section.
+-->
+
+## ♻️ Refactoring
+
+- Migrated all components from Shadow DOM (`shadowDomName`) to Light DOM (`customElementName`) for Shades v13 compatibility
+- Replaced `constructed` lifecycle with `render`-based initialization using `useRef`, `useDisposable`, and `useHostProps` in Monaco editors
+- Replaced `Router`/`RouteLink` with `NestedRouter`/`NestedRouteLink`
+- Replaced `ObservableValue` local state with `useState` hook in `JsonSchemaSelector`
+- Adopted `PageLayout` component with auto-hide app bar, simplifying `Layout` and `Header`
+- Moved inline styles to component-level `css` property across multiple components
+- Redesigned home page using `Card`, `CardHeader`, `CardContent`, and `CardActions` components
+- Replaced `element` direct access with `useRef` pattern in page components
+- Removed `any` type cast from diff editor options in compare page
+- Imported `getTextColor` as a standalone function instead of a `ThemeProviderService` method
+
+## ⬆️ Dependencies
+
+- Upgraded `@furystack/shades` from v11 to v13
+- Upgraded `@furystack/shades-common-components` from v10 to v14
+- Upgraded `monaco-editor` from 0.54 to 0.55
+- Upgraded `vite` from 7.1 to 7.3
+- Upgraded `vitest` from 3.x to 4.x
+- Upgraded `@types/node` from v24 to v25
diff --git a/.yarn/changelogs/json-tools.db4b6049.md b/.yarn/changelogs/json-tools.db4b6049.md
@@ -0,0 +1,42 @@
+<!-- version-type: patch -->
+# json-tools
+
+<!--
+FORMATTING GUIDE:
+
+### Detailed Entry (appears first when merging)
+
+Use h3 (###) and below for detailed entries with paragraphs, code examples, and lists.
+
+### Simple List Items
+
+- Simple changes can be added as list items
+- They are collected together at the bottom of each section
+
+TIP: When multiple changelog drafts are merged, heading-based entries
+appear before simple list items within each section.
+-->
+
+## 📦 Build
+
+- Added `@furystack/eslint-plugin` with `recommendedStrict` and `shadesStrict` rule sets
+- Added `@furystack/yarn-plugin-changelog` for structured changelog management
+- Restructured Vitest config from workspace-based to project-based with named test groups (Common, Service, Frontend)
+- Switched test coverage provider from `v8` to `istanbul`
+- Renamed scripts: `test:unit` → `test`, `prettier` → `format`, `prettier:check` → `format:check`, `applyVersionBumps` → `applyReleaseChanges`
+
+## ⬆️ Dependencies
+
+- Upgraded Yarn from 4.10.3 to 4.13.0
+- Upgraded `eslint` from v9 to v10
+- Upgraded `vitest` from 3.x to 4.x
+- Upgraded `@playwright/test` from 1.56 to 1.58
+- Upgraded `jsdom` from v27 to v28
+- Upgraded `prettier` from 3.6 to 3.8
+- Upgraded `typescript-eslint` from 8.46 to 8.56
+- Upgraded `@types/node` from v24 to v25
+- Various other minor dependency bumps
+
+## 🔧 Chores
+
+- Renamed package from `furystack-boilerplate-app` to `json-tools` with updated description and repository URL
diff --git a/.yarn/releases/yarn-4.12.0.cjs b/.yarn/releases/yarn-4.12.0.cjs
diff --git a/.yarn/releases/yarn-4.13.0.cjs b/.yarn/releases/yarn-4.13.0.cjs
diff --git a/.yarn/versions/db4b6049.yml b/.yarn/versions/db4b6049.yml
@@ -0,0 +1,3 @@
+releases:
+  frontend: patch
+  json-tools: patch
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -13,4 +13,4 @@ plugins:
     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'
 
-yarnPath: .yarn/releases/yarn-4.12.0.cjs
+yarnPath: .yarn/releases/yarn-4.13.0.cjs
diff --git a/eslint.config.js b/eslint.config.js
@@ -2,6 +2,7 @@
 
 import eslint from '@eslint/js'
 import prettierConfig from 'eslint-config-prettier'
+import furystack from '@furystack/eslint-plugin'
 import jsdoc from 'eslint-plugin-jsdoc'
 import playwright from 'eslint-plugin-playwright'
 import tseslint from 'typescript-eslint'
@@ -43,8 +44,11 @@ export default tseslint.config(
     },
     plugins: {
       jsdoc,
+      furystack,
     },
     rules: {
+      ...furystack.configs.recommendedStrict.rules,
+      ...furystack.configs.shadesStrict.rules,
       '@typescript-eslint/no-unused-vars': 'off', // Use Typescript own check for this
       '@typescript-eslint/ban-types': 'off',
       '@typescript-eslint/explicit-member-accessibility': [

diff --git a/frontend/package.json b/frontend/package.json
@@ -17,14 +17,14 @@
     "vitest": "^4.0.18"
   },
   "dependencies": {
-    "@furystack/core": "^15.0.35",
-    "@furystack/inject": "^12.0.29",
-    "@furystack/logging": "^8.0.29",
-    "@furystack/rest-client-fetch": "^8.0.35",
-    "@furystack/shades": "^12.0.0",
-    "@furystack/shades-common-components": "^12.0.0",
-    "@furystack/utils": "^8.1.9",
-    "@types/node": "^25.2.2",
+    "@furystack/core": "^15.2.5",
+    "@furystack/inject": "^12.0.32",
+    "@furystack/logging": "^8.1.1",
+    "@furystack/rest-client-fetch": "^8.1.2",
+    "@furystack/shades": "^13.0.0",
+    "@furystack/shades-common-components": "^14.0.0",
+    "@furystack/utils": "^8.2.1",
+    "@types/node": "^25.3.5",
     "fflate": "^0.8.2",
     "monaco-editor": "^0.55.1"
   }

diff --git a/frontend/src/components/body.tsx b/frontend/src/components/body.tsx
@@ -4,7 +4,7 @@ import { ValidatePage } from '../pages/validate.js'
 import { Home } from '../pages/home.js'
 
 export const Body = Shade({
-  shadowDomName: 'shade-app-body',
+  customElementName: 'shade-app-body',
   render: () => {
     return (
       <NestedRouter

diff --git a/frontend/src/components/github-logo/index.tsx b/frontend/src/components/github-logo/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { createComponent, Shade } from '@furystack/shades'
-import { ThemeProviderService } from '@furystack/shades-common-components'
+import { getTextColor, ThemeProviderService } from '@furystack/shades-common-components'
 // @ts-ignore
 import ghLight from './gh-light.png'
 // @ts-ignore
@@ -11,17 +11,14 @@ type GithubLogoProps = Omit<Partial<HTMLImageElement>, 'style' | 'src' | 'alt'>
 }
 
 export const GithubLogo = Shade<GithubLogoProps>({
-  shadowDomName: 'github-logo',
+  customElementName: 'github-logo',
 
   render: ({ props, useDisposable, useState, injector }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
-    const [theme, setTheme] = useState(
-      'themeName',
-      themeProvider.getTextColor(themeProvider.theme.background.paper, 'light', 'dark'),
-    )
+    const [theme, setTheme] = useState('themeName', getTextColor(themeProvider.theme.background.paper, 'light', 'dark'))
     useDisposable('themeChange', () =>
       themeProvider.subscribe('themeChanged', () => {
-        const value = themeProvider.getTextColor(themeProvider.theme.background.paper, 'light', 'dark')
+        const value = getTextColor(themeProvider.theme.background.paper, 'light', 'dark')
         setTheme(value)
       }),
     )

diff --git a/frontend/src/components/header.tsx b/frontend/src/components/header.tsx
@@ -10,7 +10,7 @@ const AppBarLink = styledShade(ShadeAppBarLink, {
 })
 
 export const Header = Shade({
-  shadowDomName: 'shade-app-header',
+  customElementName: 'shade-app-header',
   render: () => {
     return (
       <AppBar id="header">

diff --git a/frontend/src/components/json-schema-selector.tsx b/frontend/src/components/json-schema-selector.tsx
@@ -8,7 +8,7 @@ type JsonSchemaSelectorProps = {
 }
 
 export const JsonSchemaSelector = Shade<JsonSchemaSelectorProps>({
-  shadowDomName: 'shade-json-schema-selector',
+  customElementName: 'shade-json-schema-selector',
   css: {
     '& .material-symbols-outlined': {
       fontSize: '1.15em',

diff --git a/frontend/src/components/layout.tsx b/frontend/src/components/layout.tsx
@@ -4,7 +4,7 @@ import { Body } from './body.js'
 import { Header } from './header.js'
 
 export const Layout = Shade({
-  shadowDomName: 'shade-app-layout',
+  customElementName: 'shade-app-layout',
   render: () => {
     return (
       <PageLayout

diff --git a/frontend/src/components/monaco/monaco-diff-editor.tsx b/frontend/src/components/monaco/monaco-diff-editor.tsx
@@ -17,7 +17,7 @@ export type MonacoDiffEditorProps = {
 }
 
 export const MonacoDiffEditor = Shade<MonacoDiffEditorProps>({
-  shadowDomName: 'monaco-diff-editor',
+  customElementName: 'monaco-diff-editor',
   render: ({ useRef, useDisposable, injector, props, useHostProps }) => {
     const containerRef = useRef<HTMLDivElement>('container')
     const themeProvider = injector.getInstance(ThemeProviderService)

diff --git a/frontend/src/components/monaco/monaco-editor.tsx b/frontend/src/components/monaco/monaco-editor.tsx
@@ -17,7 +17,7 @@ export type MonacoEditorProps = {
 }
 
 export const MonacoEditor = Shade<MonacoEditorProps>({
-  shadowDomName: 'monaco-editor',
+  customElementName: 'monaco-editor',
   render: ({ useRef, useDisposable, injector, props, useHostProps }) => {
     const containerRef = useRef<HTMLDivElement>('container')
     const themeProvider = injector.getInstance(ThemeProviderService)

diff --git a/frontend/src/components/share-button.tsx b/frontend/src/components/share-button.tsx
@@ -2,7 +2,7 @@ import { Shade, createComponent } from '@furystack/shades'
 import { Button, NotyService } from '@furystack/shades-common-components'
 
 export const ShareButton = Shade({
-  shadowDomName: 'shade-share-button',
+  customElementName: 'shade-share-button',
   css: {
     '& .material-symbols-outlined': {
       fontSize: 'inherit',

diff --git a/frontend/src/components/theme-switch/index.tsx b/frontend/src/components/theme-switch/index.tsx
@@ -9,7 +9,7 @@ import {
 } from '@furystack/shades-common-components'
 
 export const ThemeSwitch = Shade<Omit<ButtonProps, 'onclick'>>({
-  shadowDomName: 'theme-switch',
+  customElementName: 'theme-switch',
   css: {
     '& .material-symbols-outlined': {
       fontSize: '1.27em',

diff --git a/frontend/src/pages/compare.tsx b/frontend/src/pages/compare.tsx
@@ -4,7 +4,7 @@ import { MonacoDiffEditor } from '../components/monaco/monaco-diff-editor.js'
 import { ShareButton } from '../components/share-button.js'
 
 export const ComparePage = Shade({
-  shadowDomName: 'shade-compare-page',
+  customElementName: 'shade-compare-page',
   css: {
     '& .page-container': {
       position: 'fixed',

diff --git a/frontend/src/pages/home.tsx b/frontend/src/pages/home.tsx
@@ -2,7 +2,7 @@ import { createComponent, NestedRouteLink, Shade } from '@furystack/shades'
 import { Button, Card, CardActions, CardContent, CardHeader, PageContainer } from '@furystack/shades-common-components'
 
 export const Home = Shade({
-  shadowDomName: 'shade-home',
+  customElementName: 'shade-home',
   css: {
     '& .hero': {
       display: 'flex',

diff --git a/frontend/src/pages/validate.tsx b/frontend/src/pages/validate.tsx
@@ -6,7 +6,7 @@ import { ShareButton } from '../components/share-button.js'
 import { MonacoModelProvider } from '../services/monaco-model-provider.js'
 
 export const ValidatePage = Shade({
-  shadowDomName: 'shade-validate-page',
+  customElementName: 'shade-validate-page',
   css: {
     '& .page-container': {
       position: 'fixed',

diff --git a/package.json b/package.json
@@ -14,41 +14,35 @@
   "type": "module",
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@furystack/yarn-plugin-changelog": "^1.0.2",
+    "@furystack/eslint-plugin": "^2.0.0",
+    "@furystack/yarn-plugin-changelog": "^1.0.6",
     "@playwright/test": "^1.58.2",
-    "@types/node": "^25.2.2",
+    "@types/node": "^25.3.5",
     "@vitest/coverage-istanbul": "^4.0.18",
     "@vitest/coverage-v8": "^4.0.18",
-    "eslint": "^10.0.0",
+    "eslint": "^10.0.3",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-jsdoc": "^62.5.4",
-    "eslint-plugin-playwright": "^2.5.1",
+    "eslint-plugin-jsdoc": "^62.7.1",
+    "eslint-plugin-playwright": "^2.9.0",
     "eslint-plugin-prettier": "^5.5.5",
     "husky": "^9.1.7",
-    "jsdom": "^28.0.0",
-    "lint-staged": "^16.2.7",
+    "jsdom": "^28.1.0",
+    "lint-staged": "^16.3.2",
     "prettier": "^3.8.1",
-    "rimraf": "^6.1.2",
+    "rimraf": "^6.1.3",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.54.0",
+    "typescript-eslint": "^8.56.1",
     "vite": "^7.3.1",
     "vitest": "^4.0.18"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "lint-staged": {
     "*.{ts,tsx}": [
-      "eslint --ext .tsx,.ts --cache --fix",
-      "prettier --write",
-      "git add"
+      "eslint --cache --fix",
+      "prettier --write"
     ],
     "*.{js,jsx}": [
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ]
   },
   "scripts": {
@@ -60,11 +54,12 @@
     "lint": "eslint .",
     "bumpVersions": "yarn version check --interactive",
     "applyReleaseChanges": "yarn version apply --all && yarn changelog apply && yarn format",
+    "prepare": "husky",
     "format": "prettier --write .",
     "format:check": "prettier --check ."
   },
   "engines": {
     "node": ">=18.0.0"
   },
-  "packageManager": "yarn@4.12.0"
+  "packageManager": "yarn@4.13.0"
 }