- Move procedure name into inline-editable toolbar input; replace static h1 - Toolbar now uses bg-sidebar for proper depth hierarchy vs bg-card config zone - Config zone (Details/Intake/Schedule accordions) gets explicit bg-card + border-b creating clear visual separation from the step canvas below - Step canvas switches to bg-page background for distinct work surface - Replace all hover:bg-accent (orange) with hover:bg-elevated or hover:bg-white/[0.08] throughout toolbar, accordion headers, step cards, and editor buttons - Fix step number badges: bg-accent (orange) → bg-white/[0.10] in StepList + StepEditor - Fix procedure_end step background: bg-accent/50 → bg-elevated/40 - CollapsibleEditorSection: hover:bg-accent/50 → hover:bg-white/[0.05] - Input fields in StepEditor: bg-card → bg-elevated for depth inside card surfaces - Move Content Type selector out of "More Options" into main step editor body - Rename "More Options" → "Advanced Options" for clarity - Replace Shield icon with ListOrdered for Steps section heading (semantic fix) - Bottom Add Step button: better contrast with border-white/20 + hover:bg-elevated/30 - Remove Name field from Details accordion (now lives in toolbar) - Update Details accordion summary: shows tags, visibility, description preview - Dirty indicator: "Unsaved changes" text → compact amber dot with tooltip Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])