Daily RC by softmarshmallow · Pull Request #483 · gridaco/grida

softmarshmallow · 2025-12-27T06:40:54Z

New Features
- Added inline opacity control in the color picker for precise alpha adjustment
- Added blur effect presets for quick styling application
Bug Fixes
- Paste operations now correctly use the cursor position instead of defaulting to window center
UI/Style Improvements
- Added transparency grid overlay to gradient color stops
- Enhanced ruler guides with focus and hover state indicators and color highlighting
- Improved visual styling of the color picker layout and hierarchy tree items

… styling across React components and canvas rendering

vercel · 2025-12-27T06:40:59Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
docs	Ready	Preview, Comment	Dec 27, 2025 9:18am
grida	Ready	Preview, Comment	Dec 27, 2025 9:18am

5 Skipped Deployments

Project	Deployment	Updated (UTC)
code	Ignored	Dec 27, 2025 9:18am
legacy	Ignored	Dec 27, 2025 9:18am
backgrounds	Skipped	Dec 27, 2025 9:18am
blog	Skipped	Dec 27, 2025 9:18am
viewer	Skipped	Dec 27, 2025 9:18am

coderabbitai · 2025-12-27T06:41:00Z

Walkthrough

This PR introduces improvements to hit-testing documentation, new hit-testing tests, UI enhancements for gradient stops and tree items, a new provider hook for ignoring insert/draw interactions, workspace color constants, pointer-aware paste positioning, ruler guide focus/hover tracking, depth-based target selection refinements, automated paint edit-mode activation, and various color picker controls including opacity adjustment and blur presets.

Changes

Cohort / File(s)	Change Summary
Hit-testing API Documentation `crates/grida-canvas/src/hittest/hit_tester.rs`	Updated public documentation for `hit_first()`, `hits()`, and `intersects()` to describe topmost/browser-like ordering semantics, depth preferences, and sibling handling; no logic changes.
Hit-testing Tests `crates/grida-canvas/tests/hit_test.rs`	Added three new tests: `hits_returns_siblings_in_browser_order`, `hits_returns_nodes_in_dom_order_correctly`, and `hits_returns_mixed_depth_nodes_correctly` to validate hit-testing order across overlapping elements and depth scenarios.
Gradient Stop UI Refactoring `editor/grida-canvas-react-gradient/components/gradient-color-stop-marker.tsx`, `editor/grida-canvas-react-gradient/gradient-stops-slider.tsx`	Added TransparencyGridIcon overlays to gradient stop markers and slider thumbs; replaced solid color blocks with layered structure (grid icon + color layer) using explicit positioning and z-index management.
Tree Item Styling `editor/grida-canvas-react-starter-kit/starterkit-hierarchy/node-hierarchy-tree-item.tsx`, `editor/grida-canvas-react-starter-kit/starterkit-hierarchy/tree-scene.tsx`	Added Tailwind utility classes `!outline-none` and `!ring-0` to TreeItemLabel to override default outline and focus ring styling.
Provider Utilities `editor/grida-canvas-react/provider.tsx`	Added new exported hook `useShouldIgnoreInsertDrawInteractions()` to determine whether insert/draw interactions should be ignored based on current tool state.
Workspace Colors `editor/grida-canvas-react/ui-config.ts`	Introduced new public namespace `WorkbenchColors` with six hex color constants (sky, red, yellow, violet, orange, pink) documented with CSS variable references.
Paste Positioning `editor/grida-canvas-react/use-data-transfer.ts`	Changed external clipboard paste fallback position from window center to dynamic position derived from editor's pointer state (`instance.state.pointer.client`).
Surface Viewport & Ruler Interactions `editor/grida-canvas-react/viewport/surface.tsx`	Major refactor: integrated new `useShouldIgnoreInsertDrawInteractions` hook to gate interactions; added guide focus/hover tracking with state handlers; migrated ruler marks to enriched objects; refactored tick rendering via `createTick()` helper; extended Guide component signature with optional `onFocusChange` and `onHoverChange` callbacks; propagated disabled state to resize/drag overlays; imported and used `WorkbenchColors` for focus tick styling.
Distribution Overlay `editor/grida-canvas-react/viewport/ui/surface-distribution-overlay.tsx`	Replaced `useToolState` with `useShouldIgnoreInsertDrawInteractions` hook to determine pointer event prevention during gap interactions.
Clipboard Safety Assertions `editor/grida-canvas/ASSERTIONS.md`	Updated typographic characters in existing assertion; added new assertion "Context Menu Paste Should Respect Cursor Position" documenting that all context-menu paste payloads must insert at cursor location.
Target Selection Logic `editor/grida-canvas/reducers/tools/target.ts`	Refactored `getRayTarget` sorting comparator to use depth difference for ordering with tie-breaker on hits order; changed fallback in "auto" case to return `null` instead of `undefined`; rewrote "deepest" case to find maximum depth via single pass instead of array reversal, preserving topmost order among equal depths.
Paint Edit Mode Activation `editor/scaffolds/sidecontrol/chunks/chunk-paints.tsx`	Introduced `usePaintEditModeActivation` hook to centralize gradient/image paint edit-mode logic; added effect that automatically activates/exits edit modes based on opened paint type; added safeguards for bounds and null paints; integrated hook into component alongside existing drag-and-drop logic.
Color Picker Controls `editor/scaffolds/sidecontrol/controls/color-picker-presets.tsx`	Added `disableHoverableContent` prop to ColorChip tooltip; removed hover scale animation and pointer-events restriction from tooltip content.
Inline Opacity Control `editor/scaffolds/sidecontrol/controls/color-picker.tsx`	Introduced new `InlineOpacityControl` component using number input for alpha adjustment (0-1 range, percentage suffix, 0.01 step); integrated into ColorPicker32F UI with vertical separator; extended RGB input handling to pass opacity through `onValueCommit`.
Blur Filter Presets `editor/scaffolds/sidecontrol/controls/fe.tsx`	Added Preset selection UI to FeGaussianBlurProperties that maps enum selections to radius values from tailwind blur configuration.
Tailwind Blur Configuration `editor/scaffolds/sidecontrol/controls/k/tailwindcss.ts`	Introduced new `blur` configuration map with eight variants (blur-none, blur-sm, blur, blur-md, blur-lg, blur-xl, blur-2xl, blur-3xl), each with label, class, and value object specifying type and radius.
Paint Chip Styling `editor/scaffolds/sidecontrol/controls/utils/paint-chip.tsx`	Adjusted z-index of TransparencyGridIcon in RadialGradientPaintChip from `-z-10` to `-z-0` for consistent visual stacking.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Daily RC #465: Modifies the same surface.tsx file with interactive overlay/guide/resize handle API changes, overlapping in ruler guide and interaction handling.
Grida Canvas CG: save layer optimizations & UX improvements #479: Updates editor/grida-canvas/reducers/tools/target.ts with related hit-testing/target selection and depth-ordering logic changes.
[Grida Canvas] Gradients - Gradient Transform #404: Modifies gradient editor/gradient-transform codepaths and components (gradient stop marker/slider, paint handling) that overlap with gradient UI refactoring in this PR.

Suggested labels

ux

🐰 Hops through the code with glee,
Guides now focus, blurs preset free,
Paste follows cursors where they go,
Gradients shimmer with grid's soft glow,
Colors dance in workbench's ballet!

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'Daily RC' is vague and does not convey the primary changes in this multi-faceted pull request, which includes UI styling, interaction logic, API additions, and hit-testing improvements.	Replace with a more specific title that summarizes the main focus, such as 'Add workbench colors, improve interactions, and enhance UI components' or narrow the scope to the primary change.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch canary

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

…ction behavior during insert and draw tool usage

…olor customization

…improved UI clarity

…and functionality

…er control over blur effects

…tor state for improved context sensitivity

…ing and ensuring backward compatibility with null returns

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (3)

editor/scaffolds/sidecontrol/controls/fe.tsx (1)

395-416: LGTM! Preset UI follows existing pattern.

The Gaussian blur preset selection is implemented correctly and consistently with the shadow preset pattern (lines 485-509). The value={undefined} approach means the dropdown acts as an "apply preset" control rather than showing the currently selected preset, which matches the existing UX paradigm.

Minor note (optional): Since the keys in tw.blur are identical to their .class values (e.g., "blur-sm"), line 412 could use value: key instead of value: blurPreset.class for simplicity. However, using .class is more explicit and may be preferable for clarity.
editor/scaffolds/sidecontrol/chunks/chunk-paints.tsx (1)
324-339: Consider consolidating the two reset effects.

There are two separate mechanisms for resetting openPaintIndex:

Effect checking content_edit_mode?.node_id !== node_id (lines 326-330)

Ref-based check for node_id changes (lines 333-339)

While both are functionally correct, the ref-based approach (lines 333-339) alone would handle both cases since node_id prop changes trigger it. The first effect is only needed if content_edit_mode can change independently while node_id stays the same.

If the intent is to reset when switching to a different node's edit mode, the current implementation is correct. Otherwise, consider consolidating:
-  // Reset user-controlled state when content edit mode changes to a different node
-  // (but not when it becomes null for the current node - e.g., when switching from gradient to solid)
-  React.useEffect(() => {
-    if (content_edit_mode && content_edit_mode.node_id !== node_id) {
-      setOpenPaintIndex(null);
-    }
-  }, [content_edit_mode, node_id]);
-
   // Reset open state when node_id changes (different node selected)
   const prevNodeIdRef = React.useRef(node_id);
   React.useEffect(() => {
     if (prevNodeIdRef.current !== node_id) {
       prevNodeIdRef.current = node_id;
       setOpenPaintIndex(null);
     }
   }, [node_id]);
editor/scaffolds/sidecontrol/controls/color-picker.tsx (1)
17-63: Add accessible label and improve placeholder text.

The InlineOpacityControl input lacks an accessible label (e.g., aria-label), making it unclear to screen reader users. Additionally, the placeholder "<opacity>" uses unconventional formatting.
🔎 Suggested improvements
  return (
    <input
      ref={inputRef}
      type={inputType}
-     placeholder="<opacity>"
+     placeholder="100%"
+     aria-label="Opacity"
      value={internalValue}
      onChange={handleChange}
      onFocus={handleFocus}
      onBlur={handleBlur}
      onKeyDown={handleKeyDown}
      className="
        w-12 appearance-none ps-1.5 text-xs
        placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground
        bg-transparent outline-none
      "
    />
  );

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fc6ce77 and ba0ae07.

📒 Files selected for processing (19)

crates/grida-canvas/src/hittest/hit_tester.rs
crates/grida-canvas/tests/hit_test.rs
editor/grida-canvas-react-gradient/components/gradient-color-stop-marker.tsx
editor/grida-canvas-react-gradient/gradient-stops-slider.tsx
editor/grida-canvas-react-starter-kit/starterkit-hierarchy/node-hierarchy-tree-item.tsx
editor/grida-canvas-react-starter-kit/starterkit-hierarchy/tree-scene.tsx
editor/grida-canvas-react/provider.tsx
editor/grida-canvas-react/ui-config.ts
editor/grida-canvas-react/use-data-transfer.ts
editor/grida-canvas-react/viewport/surface.tsx
editor/grida-canvas-react/viewport/ui/surface-distribution-overlay.tsx
editor/grida-canvas/ASSERTIONS.md
editor/grida-canvas/reducers/tools/target.ts
editor/scaffolds/sidecontrol/chunks/chunk-paints.tsx
editor/scaffolds/sidecontrol/controls/color-picker-presets.tsx
editor/scaffolds/sidecontrol/controls/color-picker.tsx
editor/scaffolds/sidecontrol/controls/fe.tsx
editor/scaffolds/sidecontrol/controls/k/tailwindcss.ts
editor/scaffolds/sidecontrol/controls/utils/paint-chip.tsx

🧰 Additional context used

📓 Path-based instructions (7)

**/*.{ts,tsx}