fix xyflow import and update dependencies

[elf-pavlik]

i noticed it wasn't working due to dependency on latest version of likec4, I changed it to ^1.58.0 and updated other dependencies while at it.

[coderabbitai]

📝 Walkthrough

Walkthrough

Dependency versions in package.json are bumped across dependencies (likec4, react, react-dom, react-use) and devDependencies (@types/react, @types/react-dom, @vitejs/plugin-react, typescript, vite). src/CustomNodes.tsx adapts to the updated likec4/react API by renaming the XYFlow import to xyflow, updating NodeToolbar/Position references, restructuring the metadata toolbar with data-metadata-key/data-metadata-value elements and action buttons, and correcting the IconBolt SVG to use React's strokeWidth prop.

Changes

Dependency Upgrade and CustomNodes Adaptation

Layer / File(s)	Summary
Dependency version bumps package.json	Pins likec4 to ^1.58.0, bumps react/react-dom to ^19.2.7, react-use to ^17.6.1; bumps @types/react*, @vitejs/plugin-react to ^6.0.2, typescript to ^6.0.3, and vite to ^8.0.16.
CustomNodes xyflow rename, toolbar, and SVG fix src/CustomNodes.tsx	Renames the XYFlow named import to xyflow and updates all NodeToolbar/Position.Top references. Rewrites the metadata toolbar to render data-metadata-key/data-metadata-value elements and adds "Open Details" and "Focus" buttons that stop propagation and call diagram.openElementDetails/diagram.focusNode. Fixes IconBolt SVG to use strokeWidth instead of stroke-width.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the two main changes: fixing xyflow imports and updating dependencies, both of which are clearly reflected in the changeset.
Description check	✅ Passed	The description is directly related to the changeset, explaining the motivation for pinning likec4 to a specific version and updating other dependencies.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/CustomNodes.tsx`:
- Around line 63-65: The Fragment component in the map function rendering
metadata items is missing a stable key prop, which causes React reconciliation
issues and warnings. Add a key prop to the Fragment element and use the key
variable from the metadata iteration as the value, since it serves as a unique
and stable identifier for each item being rendered.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b73575ca-072e-4d35-9771-802323a5f93b

📥 Commits

Reviewing files that changed from the base of the PR and between 0b45ac5 and 605c70b.

📒 Files selected for processing (2)

• package.json
• src/CustomNodes.tsx

[coderabbitai]

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Add a stable key to the mapped Fragment.

Line 63 renders list items without a key, which can produce reconciliation glitches and React warnings.

Proposed fix

-                {Object.entries(metadata).map(([key, value]) => (
-                  <Fragment>
+                {Object.entries(metadata).map(([key, value]) => (
+                  <Fragment key={key}>
                     <div data-metadata-key>{key}</div>
                     <div data-metadata-value>{value}</div>
-                  </Fragment>))}
+                  </Fragment>
+                ))}

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<div data-metadata-key>{key}</div>
	<div data-metadata-value>{value}</div>
	</Fragment>))}
	{Object.entries(metadata).map(([key, value]) => (
	<Fragment key={key}>
	<div data-metadata-key>{key}</div>
	<div data-metadata-value>{value}</div>
	</Fragment>
	))}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/CustomNodes.tsx` around lines 63 - 65, The Fragment component in the map
function rendering metadata items is missing a stable key prop, which causes
React reconciliation issues and warnings. Add a key prop to the Fragment element
and use the key variable from the metadata iteration as the value, since it
serves as a unique and stable identifier for each item being rendered.