From 877b1aee177dedadabe792a3d1576aa806904f99 Mon Sep 17 00:00:00 2001 From: Douglas Date: Fri, 24 Apr 2026 00:53:59 +0100 Subject: [PATCH] feat(ui): add ruled, dotted, and dashed line background overlays Introduces three SVG-based workspace backdrops and exports them from the Background barrel alongside existing dot and grid patterns. Made-with: Cursor --- .../Background/DashedLinesBackground.tsx | 53 +++++++++++++++++++ .../Background/DottedLinesBackground.tsx | 53 +++++++++++++++++++ .../Background/RuledLinesBackground.tsx | 49 +++++++++++++++++ src/components/Background/index.ts | 3 ++ 4 files changed, 158 insertions(+) create mode 100644 src/components/Background/DashedLinesBackground.tsx create mode 100644 src/components/Background/DottedLinesBackground.tsx create mode 100644 src/components/Background/RuledLinesBackground.tsx diff --git a/src/components/Background/DashedLinesBackground.tsx b/src/components/Background/DashedLinesBackground.tsx new file mode 100644 index 00000000..f7eb5c2e --- /dev/null +++ b/src/components/Background/DashedLinesBackground.tsx @@ -0,0 +1,53 @@ +// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. ========= +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. ========= + +import { useId } from 'react'; + +const LINE_SPACING = 28; +/** Tile width: dash period 12px → 48px fits four repeats (between soft dots and full grid). */ +const DASH_TILE = 48; + +/** Horizontal dashed lines — stronger than dotted guides, no verticals (unlike grid). */ +export default function DashedLinesBackground() { + const patternId = `${useId().replace(/:/g, '')}-dashed-ruled`; + + return ( + + + + + + + + + ); +} diff --git a/src/components/Background/DottedLinesBackground.tsx b/src/components/Background/DottedLinesBackground.tsx new file mode 100644 index 00000000..956e17b6 --- /dev/null +++ b/src/components/Background/DottedLinesBackground.tsx @@ -0,0 +1,53 @@ +// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. ========= +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. ========= + +import { useId } from 'react'; + +const LINE_SPACING = 28; +/** Tile width so dash pattern repeats seamlessly when tiled. */ +const DASH_TILE = 32; + +/** Horizontal dotted guide lines, for use inside a `relative` container. */ +export default function DottedLinesBackground() { + const patternId = `${useId().replace(/:/g, '')}-dotted-ruled`; + + return ( + + + + + + + + + ); +} diff --git a/src/components/Background/RuledLinesBackground.tsx b/src/components/Background/RuledLinesBackground.tsx new file mode 100644 index 00000000..4b98a086 --- /dev/null +++ b/src/components/Background/RuledLinesBackground.tsx @@ -0,0 +1,49 @@ +// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. ========= +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. ========= + +import { useId } from 'react'; + +const LINE_SPACING = 28; + +/** Horizontal ruled lines (notebook paper), for use inside a `relative` container. */ +export default function RuledLinesBackground() { + const patternId = `${useId().replace(/:/g, '')}-ruled`; + + return ( + + + + + + + + + ); +} diff --git a/src/components/Background/index.ts b/src/components/Background/index.ts index b92beeb0..c523b632 100644 --- a/src/components/Background/index.ts +++ b/src/components/Background/index.ts @@ -12,5 +12,8 @@ // limitations under the License. // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. ========= +export { default as DashedLinesBackground } from './DashedLinesBackground'; export { default as DotPatternBackground } from './DotPatternBackground'; +export { default as DottedLinesBackground } from './DottedLinesBackground'; export { default as GridPatternBackground } from './GridPatternBackground'; +export { default as RuledLinesBackground } from './RuledLinesBackground';