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

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 (
+    <svg
+      className="inset-0 pointer-events-none absolute z-0 h-full w-full"
+      aria-hidden
+    >
+      <defs>
+        <pattern
+          id={patternId}
+          width={DASH_TILE}
+          height={LINE_SPACING}
+          patternUnits="userSpaceOnUse"
+        >
+          <line
+            x1="0"
+            y1={LINE_SPACING - 0.5}
+            x2={DASH_TILE}
+            y2={LINE_SPACING - 0.5}
+            className="stroke-ds-border-neutral-default-default"
+            strokeWidth={1}
+            strokeDasharray="8 4"
+            strokeLinecap="butt"
+            opacity={0.33}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
+    </svg>
+  );
+}

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 (
+    <svg
+      className="inset-0 pointer-events-none absolute z-0 h-full w-full"
+      aria-hidden
+    >
+      <defs>
+        <pattern
+          id={patternId}
+          width={DASH_TILE}
+          height={LINE_SPACING}
+          patternUnits="userSpaceOnUse"
+        >
+          <line
+            x1="0"
+            y1={LINE_SPACING - 0.5}
+            x2={DASH_TILE}
+            y2={LINE_SPACING - 0.5}
+            className="stroke-ds-border-neutral-default-default"
+            strokeWidth={1}
+            strokeDasharray="2 6"
+            strokeLinecap="round"
+            opacity={0.4}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
+    </svg>
+  );
+}

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 (
+    <svg
+      className="inset-0 pointer-events-none absolute z-0 h-full w-full"
+      aria-hidden
+    >
+      <defs>
+        <pattern
+          id={patternId}
+          width="1"
+          height={LINE_SPACING}
+          patternUnits="userSpaceOnUse"
+        >
+          <line
+            x1="0"
+            y1={LINE_SPACING - 0.5}
+            x2="1"
+            y2={LINE_SPACING - 0.5}
+            className="stroke-ds-border-neutral-default-default"
+            strokeWidth={1}
+            opacity={0.35}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
+    </svg>
+  );
+}

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';