pat/wursor
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

improved a lot of things

Browse Source
This commit is contained in:
SinachPat
2026-04-27 05:11:21 +01:00
parent 48e1ba115e
commit 7afb0cc43c
14 changed files with 44 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/app/globals.css
+21
View File
@@ -16,3 +16,24 @@ body {
font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
background: #f5f5f5;
}
/* ── Accessible focus indicators ────────────────────────────────────────────
Inline styles set outline:none to suppress browser defaults, but without a
replacement this breaks keyboard navigation. :focus-visible adds a visible
ring only for keyboard focus (not mouse clicks) across the entire app.
The ring colour adapts to context: blue for light-bg pages (#0066FF),
and a lighter blue for dark-bg panels (#3385FF / canvas inspector etc.).
We use !important to override inline outline:none intentionally. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid #0066FF !important;
outline-offset: 2px !important;
}
/* Canvas panels sit on a dark background — the ring matches the panel accent */
.dark-panel input:focus-visible,
.dark-panel textarea:focus-visible {
outline-color: #3385FF !important;
}
packages/app/src/app/onboarding/page.tsx
+2 -2
View File
@@ -47,7 +47,7 @@ export default function OnboardingPage() {
return (
<main style={{
minHeight: '100vh',
minHeight: '100dvh',
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
background: '#FAFAFA',
fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
@@ -98,7 +98,7 @@ export default function OnboardingPage() {
width: '100%', boxSizing: 'border-box',
padding: '11px 13px', fontSize: '0.9375rem',
border: '1px solid rgba(0,0,0,0.12)', borderRadius: 9,
outline: 'none', color: '#0A0A0A', background: '#FFFFFF',
color: '#0A0A0A', background: '#FFFFFF',
fontFamily: 'inherit',
}}
onFocus={e => (e.currentTarget.style.borderColor = '#0066FF')}
packages/app/src/app/workspace/[wid]/page.tsx
+1 -1
View File
@@ -46,7 +46,7 @@ export default async function WorkspacePage({ params }: { params: Promise<{ wid:
const projects = (projectsData ?? []) as Project[];
return (
<div style={{ minHeight: '100vh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
<div style={{ minHeight: '100dvh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
<AppHeader breadcrumbs={[
{ label: 'Workspaces', href: '/workspaces' },
{ label: workspace.name },
packages/app/src/app/workspace/[wid]/project/new/page.tsx
+2 -2
View File
@@ -50,7 +50,7 @@ export default function NewProjectPage({ params }: { params: Promise<{ wid: stri
width: '100%', boxSizing: 'border-box' as const,
padding: '10px 12px', fontSize: '0.9375rem',
border: '1px solid rgba(0,0,0,0.12)', borderRadius: 8,
outline: 'none', color: '#0A0A0A', background: '#FFFFFF',
color: '#0A0A0A', background: '#FFFFFF',
fontFamily: 'inherit',
};
@@ -61,7 +61,7 @@ export default function NewProjectPage({ params }: { params: Promise<{ wid: stri
};
return (
<div style={{ minHeight: '100vh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
<div style={{ minHeight: '100dvh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
<AppHeader breadcrumbs={[
{ label: 'Workspaces', href: '/workspaces' },
{ label: 'Workspace', href: `/workspace/${wid}` },
packages/app/src/app/workspace/[wid]/settings/page.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ export default async function WorkspaceSettingsPage({ params }: { params: Promis
const memberRole = (member as { role: string }).role;
return (
<div style={{ minHeight: '100vh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
<div style={{ minHeight: '100dvh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
<AppHeader breadcrumbs={[
{ label: 'Workspaces', href: '/workspaces' },
{ label: workspace.name, href: `/workspace/${wid}` },
packages/app/src/app/workspaces/new/page.tsx
+2 -2
View File
@@ -35,7 +35,7 @@ export default function NewWorkspacePage() {
}
return (
<div style={{ minHeight: '100vh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
<div style={{ minHeight: '100dvh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
<AppHeader breadcrumbs={[{ label: 'Workspaces', href: '/workspaces' }, { label: 'New workspace' }]} />
<main style={{ maxWidth: 480, margin: '64px auto', padding: '0 24px' }}>
@@ -61,7 +61,7 @@ export default function NewWorkspacePage() {
width: '100%', boxSizing: 'border-box',
padding: '10px 12px', fontSize: '0.9375rem',
border: '1px solid rgba(0,0,0,0.12)', borderRadius: 8,
outline: 'none', color: '#0A0A0A', background: '#FFFFFF',
color: '#0A0A0A', background: '#FFFFFF',
fontFamily: 'inherit',
}}
onFocus={e => (e.currentTarget.style.borderColor = '#0066FF')}
packages/app/src/app/workspaces/page.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ export default async function WorkspacesPage() {
if (workspaces.length === 0) redirect('/onboarding');
return (
<div style={{ minHeight: '100vh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
<div style={{ minHeight: '100dvh', background: '#FAFAFA', fontFamily: "'Inter', -apple-system, sans-serif" }}>
<AppHeader />
<main style={{ maxWidth: 960, margin: '0 auto', padding: '48px 24px' }}>
packages/app/src/components/canvas/Canvas.tsx
+2
View File
@@ -350,6 +350,8 @@ function ZonePromptOverlay({
fontFamily: 'inherit', resize: 'none', outline: 'none',
marginBottom: 8,
}}
onFocus={e => (e.currentTarget.style.borderColor = '#3385FF')}
onBlur={e => (e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)')}
/>
{status === 'error' && (
<p style={{ fontSize: '0.625rem', color: '#FF8080', margin: '0 0 6px' }}>Request failed — try again</p>
packages/app/src/components/chrome/AppChrome.tsx
+2
View File
@@ -110,6 +110,8 @@ export function AppChrome({ workspaceId, projectId, workspaceName, projectName }
borderBottom: '1px solid rgba(255,255,255,0.06)',
display: 'flex', alignItems: 'center',
padding: '0 14px', gap: 0,
zIndex: 10,
position: 'relative',
}}>
{/* Logo */}
<Link href="/workspaces" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', marginRight: 4 }}>
packages/app/src/components/inspector/Inspector.tsx
+8 -5
View File
@@ -40,6 +40,7 @@ export function Inspector() {
return (
<div
className="dark-panel"
style={{
gridColumn: 3,
gridRow: 2,
@@ -79,8 +80,8 @@ export function Inspector() {
))}
</div>
{/* Content */}
<div style={{ flex: 1, overflow: 'auto' }}>
{/* Content — minHeight:0 is required so this flex child can actually shrink and scroll */}
<div style={{ flex: 1, overflow: 'auto', minHeight: 0 }}>
{!selectedArtboardId ? (
<div
style={{
@@ -373,17 +374,19 @@ function PropsTab({
marginTop: 8,
padding: '8px 10px',
background: 'rgba(0,0,0,0.35)',
border: '1px solid rgba(255,255,255,0.06)',
border: '1px solid rgba(255,255,255,0.08)',
borderRadius: 6,
maxHeight: 220,
overflow: 'auto',
overflowY: 'auto',
fontSize: '0.5875rem',
fontFamily: "'Inter', sans-serif",
color: 'rgba(255,255,255,0.62)',
lineHeight: 1.65,
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
}}>
scrollbarWidth: 'thin',
scrollbarColor: 'rgba(255,255,255,0.18) transparent',
} as React.CSSProperties}>
{driftReport}
</div>
)}
packages/app/src/components/navigator/ArtboardNavigator.tsx
+1
View File
@@ -81,6 +81,7 @@ export function ArtboardNavigator() {
return (
<div
className="dark-panel"
style={{
gridColumn: 1,
gridRow: 2,
packages/app/src/components/shell/ProjectSettingsForm.tsx
-1
View File
@@ -35,7 +35,6 @@ const INPUT: React.CSSProperties = {
padding: '9px 12px',
border: '1px solid rgba(0,0,0,0.12)',
borderRadius: 9,
outline: 'none',
fontFamily: "'Inter', -apple-system, sans-serif",
color: '#0A0A0A',
background: '#FAFAFA',
packages/app/src/components/shell/WorkspaceSettingsForm.tsx
-1
View File
@@ -31,7 +31,6 @@ const INPUT: React.CSSProperties = {
padding: '9px 12px',
border: '1px solid rgba(0,0,0,0.12)',
borderRadius: 9,
outline: 'none',
fontFamily: "'Inter', -apple-system, sans-serif",
color: '#0A0A0A',
background: '#FAFAFA',