ItemPickerScript() — ui Function Reference

Architecture documentation for the ItemPickerScript() function in item-picker.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem

Entity Profile

DesignEngine→ PreviewSystem→ ItemPickerScript() — ui Function Reference

Dependency Diagram

graph TD
  89c31a93_7ed5_e319_5e61_9dfa82a77721["ItemPickerScript()"]
  4c6a85bd_ede3_a357_edb5_0823fadf5bba["item-picker.tsx"]
  89c31a93_7ed5_e319_5e61_9dfa82a77721 -->|defined in| 4c6a85bd_ede3_a357_edb5_0823fadf5bba
  style 89c31a93_7ed5_e319_5e61_9dfa82a77721 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/item-picker.tsx lines 167–193

export function ItemPickerScript() {
  return (
    <Script
      id="design-system-listener"
      strategy="beforeInteractive"
      dangerouslySetInnerHTML={{
        __html: `
            (function() {
              // Forward Cmd/Ctrl + K and Cmd/Ctrl + P
              document.addEventListener('keydown', function(e) {
                if ((e.key === 'k' || e.key === 'p') && (e.metaKey || e.ctrlKey)) {
                  e.preventDefault();
                  if (window.parent && window.parent !== window) {
                    window.parent.postMessage({
                      type: '${CMD_K_FORWARD_TYPE}',
                      key: e.key
                    }, '*');
                  }
                }
              });

            })();
          `,
      }}
    />
  )
}