hunk.code_window: {
   	"name": "@tldraw/tlschema",
   	"description": "A tiny little drawing app (schema).",
   	"version": "2.0.0-beta.0",
   	"packageManager": "yarn@3.5.0",
   	"author": {
   		"name": "tldraw GB Ltd.",
  
hunk.labels: keep keep keep replace keep keep keep
hunk.after_edit: 	"version": "2.0.0-alpha.17",
  
hunk.file_path: packages/tlschema/package.json
hunk.type: replace
file: import { TLUiMenuChild } from '../hooks/menuHelpers'
  import { useKeyboardShortcutsSchema } from '../hooks/useKeyboardShortcutsSchema'
  import { useReadonly } from '../hooks/useReadonly'
  import { TLUiTranslationKey } from '../hooks/useTranslation/TLUiTranslationKey'
  import { useTranslation } from '../hooks/useTranslation/useTranslation'
  import * as Dialog from './primitives/Dialog'
  import { Kbd } from './primitives/Kbd'
  
  export const KeyboardShortcutsDialog = () => {
  	const msg = useTranslation()
  	const isReadonly = useReadonly()
  	const shortcutsItems = useKeyboardShortcutsSchema()
  
  	function getKeyboardShortcutItem(item: TLUiMenuChild) {
  		if (isReadonly && !item.readonlyOk) return null
  
  		switch (item.type) {
  			case 'group': {
  				return (
  					<div className="tlui-shortcuts-dialog__group" key={item.id}>
  						<h2 className="tlui-shortcuts-dialog__group__title">
  							{msg(item.id as TLUiTranslationKey)}
  						</h2>
  						<div className="tlui-shortcuts-dialog__group__content">
  							{item.children
  								.filter((item) => item.type === 'item' && item.actionItem.kbd)
  								.map(getKeyboardShortcutItem)}
  						</div>
  					</div>
  				)
  			}
  			case 'item': {
  				const { id, label, shortcutsLabel, kbd } = item.actionItem
  
  				return (
  					<div className="tlui-shortcuts-dialog__key-pair" key={id}>
  						<div className="tlui-shortcuts-dialog__key-pair__key">
  							{msg((shortcutsLabel ?? label)!)}
  						</div>
  						<div className="tlui-shortcuts-dialog__key-pair__value">
  							<Kbd>{kbd!}</Kbd>
  						</div>
  					</div>
  				)
  			}
  		}
  	}
  
  	return (
  		<>
  			<Dialog.Header className="tlui-shortcuts-dialog__header">
  				<Dialog.Title>{msg('shortcuts-dialog.title')}</Dialog.Title>
  				<Dialog.CloseButton />
  			</Dialog.Header>
  			<Dialog.Body className="tlui-shortcuts-dialog__body">
  				{shortcutsItems.map(getKeyboardShortcutItem)}
  			</Dialog.Body>
  			<div className="tlui-dialog__scrim" />
  		</>
  	)
  }
  