fix(ui): clipboard copy for http://0.0.0.0:3000 and unify implementations

[Copilot]

• Create a unified copyToClipboard utility function in martin-ui/src/lib/utils.ts
  • Implement primary approach using navigator.clipboard.writeText()
  • Add fallback using document.execCommand('copy') for non-secure contexts
• Create simplified useCopyToClipboard hook
  • Exposes copied boolean and copiedValue for per-item tracking
  • Only successMessage is configurable
  • Standardized 2000ms reset delay
• Fixed sprite-download.tsx to show copied state only for the copied item
• All 167 tests pass, TypeScript and linting pass

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Copy to clipboard does not work for http://0.0.0.0:3000</issue_title>
<issue_description>By default, Martin starts at http://0.0.0.0:3000 -- which is usually the same as http://localhost:3000 with one caveat: navigator.clipboard is not available for "non-https non-localhost" cases - i.e. Copy to clipboard is not working. A simple workaround would be to use something like this code in case of an error, or one of numerous NPM libs. I tested it locally, seem to work.

P.S. Is there a reason why there are so many near-duplicate clipboard copy implementations? Seems like a good target for code reuse.

const el = document.createElement('textarea');
el.value = text;
el.style.position = 'fixed';
el.style.opacity = '0';
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
```</issue_description>

<agent_instructions>handle localhost in navigator.clipboard and unify the clipboard implementations</agent_instructions>

## Comments on the Issue (you are @copilot in this section)

<comments>
</comments>

• Fixes Copy to clipboard does not work for http://0.0.0.0:3000 #2486

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[CommanderStorm]

@copilot

• please test properly using vitest mocking best practices instead of Object.defineProperty
• please make sure to reduce the number of competing clipboard implementations while we are at it

[Copilot]

@copilot

• please test properly using vitest mocking best practices instead of Object.defineProperty
• please make sure to reduce the number of competing clipboard implementations while we are at it

Addressed in c552e5c:

• Replaced Object.defineProperty with vi.stubGlobal for navigator mocking
• Using vi.unstubAllGlobals() and vi.restoreAllMocks() for proper cleanup
• Added execCommand directly to document object rather than stubbing entire document

Clipboard implementations are now unified to a single copyToClipboard utility in lib/utils.ts. All 5 previous implementations now use this shared function.

[CommanderStorm]

@copilot
Do some deep thinking how all usages of the clipboard api work.
Come up with a system that is less duplicate code.

[CommanderStorm]

@copilot
Do some deep thinking how all usages of the clipboard api work.
Come up with a system that is less duplicate code.

[Copilot]

@copilot
Do some deep thinking how all usages of the clipboard api work.
Come up with a system that is less duplicate code.

Addressed in 5d8b3d8. Created a useCopyToClipboard hook that encapsulates all clipboard logic:

const { copy, copied, copiedText } = useCopyToClipboard({
  successMessage: 'URL copied!',
  errorMessage: 'Copy failed',
  resetDelay: 2000,
});

The hook handles:

• Calling the copyToClipboard utility (with fallback for non-HTTPS)
• Managing copied and copiedText state with auto-reset
• Showing success/error toasts (configurable)
• Proper timeout cleanup to prevent memory leaks

All 5 components now use this single hook instead of duplicating the try/catch/toast pattern.

[Copilot]

@copilot
Do some deep thinking how all usages of the clipboard api work.
Come up with a system that is less duplicate code.

Addressed in 5d8b3d8. Created a two-layer clipboard abstraction:

1. copyToClipboard(text) utility in lib/utils.ts - handles the actual clipboard API with fallback for non-HTTPS contexts
2. useCopyToClipboard(options) hook in hooks/use-copy-to-clipboard.ts - handles state management, toast notifications, and auto-reset

All 5 components now use the hook instead of duplicating clipboard handling logic:

• Tracks copied boolean and copiedValue for multi-item UIs
• Configurable success/error messages and reset timeouts
• 7 tests for the hook, 4 tests for the utility function

[CommanderStorm]

@copilot

• handleCopy seems uneessesary and can be inlined
• martin/martin-ui/src/hooks/use-copy-to-clipboard.ts
  • needs a pass to clean up the code. It is currently written very amateur-ish with way to many comments. reduce the size of the comments to a best practice level
  • can reduce its options, for example always showing the error/success toast, making resetDelay standardised and hard coding the errroMessage. Only successMessage seems like a resonable option for this.

[Copilot]

@copilot

• handleCopy seems uneessesary and can be inlined
  ...

Addressed in 250384e:

• Inlined handleCopy in copy-link-button.tsx and removed handleCopyUrl wrapper in sprite-download.tsx
• Simplified hook to ~65 lines with minimal comments
• Removed options: showSuccessToast, showErrorToast, errorMessage, resetDelay
• Hardcoded RESET_DELAY = 2000 and ERROR_MESSAGE as constants
• Only successMessage remains configurable

[CommanderStorm]

@copilot the sprite download page shares one copied which means that if one item gets copy(), others also get the copied=true -> the green icon.
This is a bug and should not happen.

Make sure this is not true on other pages as well.
Be aware that I removed a few pages without animation potential.
When using a Tooltip, the tooltip disapeares when clicked outside, even if this is the triggers copy()

[Copilot]

@copilot the sprite download page shares one copied which means that if one item gets copy(), others also get the copied=true -> the green icon.
This is a bug and should not happen.

...

Fixed in 9698664.

Added copiedValue to the useCopyToClipboard hook to track which specific value was copied. Now sprite-download.tsx compares copiedValue === format.url to show the green icon only for the item that was actually copied.

The other components are fine:

• style-integration-guide.tsx - Each CodeBlock has its own hook instance, so no shared state issue
• tooltip-copy-text.tsx and SpriteCanvas.tsx - Tooltip closes on click, so no icon switch needed (per previous review feedback)

[nyurik]

do we actually need an indicator that the value was copied, if we also have a toast popping up?

[CommanderStorm]

Well.. it looks nice 😉

[nyurik]

sounds like a good reason :)

[CommanderStorm]

LGTM now 🎉

[Copilot]

Pull request overview

This PR fixes clipboard copy functionality for non-secure contexts (http://0.0.0.0:3000) and unifies multiple near-duplicate clipboard implementations across the UI codebase by introducing a centralized utility and hook.

Key changes:

• Added copyToClipboard utility with modern Clipboard API and legacy execCommand fallback
• Created unified useCopyToClipboard hook with toast notifications and auto-reset state
• Refactored 6 components to use the new unified implementation

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
martin/martin-ui/src/lib/utils.ts	Adds centralized copyToClipboard function with fallback for non-secure contexts
martin/martin-ui/src/hooks/use-copy-to-clipboard.ts	New hook providing consistent clipboard API with toast notifications and state management
martin/martin-ui/src/components/ui/tooltip-copy-text.tsx	Refactored to use unified hook, removing duplicate clipboard logic
martin/martin-ui/src/components/ui/copy-link-button.tsx	Migrated to new hook with visual feedback (icon switching)
martin/martin-ui/src/components/sprite/SpriteCanvas.tsx	Simplified clipboard handling using new hook
martin/martin-ui/src/components/error/error-state.tsx	Updated styling to use gap utility for consistency
martin/martin-ui/src/components/dialogs/style-integration-guide.tsx	Refactored CodeBlock to use hook, removed per-block ID tracking
martin/martin-ui/src/components/dialogs/sprite-download.tsx	Migrated to hook with per-item copy state using copiedValue
martin/martin-ui/__tests__/lib/utils.test.ts	Added comprehensive tests for copyToClipboard including fallback scenarios
martin/martin-ui/__tests__/hooks/use-copy-to-clipboard.test.tsx	New test suite for the hook covering success, custom messages, and error cases
martin/martin-ui/package-lock.json	Version bump to 1.2.0 and automatic dependency resolution updates

Files not reviewed (1)

• martin/martin-ui/package-lock.json: Language not supported

[Copilot]

Missing test coverage for the copiedValue state tracking. The hook exposes copiedValue which is critical for per-item copy state in sprite-download.tsx (checking if copiedValue === format.url), but there are no tests verifying this functionality. Tests should verify that copiedValue is set correctly and reset after the timeout.

[Copilot]

The textarea.focus() call in the fallback clipboard implementation could cause visual focus shifts for keyboard users. Since the textarea is aria-hidden and positioned off-screen, calling focus() might still trigger unexpected focus events or screen reader announcements. Consider using textarea.select() without an explicit focus() call, as select() implicitly focuses the element when needed for the copy operation.

Suggested change

	textarea.focus();
	textarea.setSelectionRange(0, text.length);
	textarea.select();

[Copilot]

The icon and text order is inconsistent. In the "copied" state, the text comes before the icon ("Copied" then CopyCheck), but in the default state, the text comes before the icon ("Copy" then Copy icon). This is different from other components like sprite-download.tsx where the icon consistently appears before the text. Consider using a consistent order for better visual predictability.

Suggested change

	Copied
	<CopyCheck className="w-3 h-3 dark:text-green-600" />
	</>
	) : (
	<>
	Copy
	<Copy className="w-3 h-3" />
	<CopyCheck className="w-3 h-3 dark:text-green-600" />
	<span className="ml-1">Copied</span>
	</>
	) : (
	<>
	<Copy className="w-3 h-3" />
	<span className="ml-1">Copy</span>

[CommanderStorm]

Not inconsistent, this is on purpose. looks very janky otherwise