@aceshooting/lyra-ui 2.2.0 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -1
- package/custom-elements.json +18702 -12825
- package/dist/components/app-rail/app-rail-item.class.d.ts +16 -1
- package/dist/components/app-rail/app-rail-item.class.d.ts.map +1 -1
- package/dist/components/app-rail/app-rail-item.class.js +52 -1
- package/dist/components/app-rail/app-rail-item.class.js.map +1 -1
- package/dist/components/app-rail/app-rail-item.styles.d.ts.map +1 -1
- package/dist/components/app-rail/app-rail-item.styles.js +11 -0
- package/dist/components/app-rail/app-rail-item.styles.js.map +1 -1
- package/dist/components/app-rail/app-rail.class.d.ts +13 -1
- package/dist/components/app-rail/app-rail.class.d.ts.map +1 -1
- package/dist/components/app-rail/app-rail.class.js +23 -1
- package/dist/components/app-rail/app-rail.class.js.map +1 -1
- package/dist/components/app-rail/app-rail.styles.d.ts.map +1 -1
- package/dist/components/app-rail/app-rail.styles.js +6 -0
- package/dist/components/app-rail/app-rail.styles.js.map +1 -1
- package/dist/components/attachment-chip/attachment-chip.class.d.ts +6 -0
- package/dist/components/attachment-chip/attachment-chip.class.d.ts.map +1 -1
- package/dist/components/attachment-chip/attachment-chip.class.js +9 -0
- package/dist/components/attachment-chip/attachment-chip.class.js.map +1 -1
- package/dist/components/attachment-chip/attachment-chip.styles.d.ts.map +1 -1
- package/dist/components/attachment-chip/attachment-chip.styles.js +7 -0
- package/dist/components/attachment-chip/attachment-chip.styles.js.map +1 -1
- package/dist/components/attachment-trigger/attachment-trigger.class.d.ts +6 -3
- package/dist/components/attachment-trigger/attachment-trigger.class.d.ts.map +1 -1
- package/dist/components/attachment-trigger/attachment-trigger.class.js +51 -0
- package/dist/components/attachment-trigger/attachment-trigger.class.js.map +1 -1
- package/dist/components/attachment-trigger/attachment-trigger.styles.d.ts.map +1 -1
- package/dist/components/attachment-trigger/attachment-trigger.styles.js +10 -0
- package/dist/components/attachment-trigger/attachment-trigger.styles.js.map +1 -1
- package/dist/components/avatar/avatar.class.d.ts +43 -0
- package/dist/components/avatar/avatar.class.d.ts.map +1 -0
- package/dist/components/avatar/avatar.class.js +75 -0
- package/dist/components/avatar/avatar.class.js.map +1 -0
- package/dist/components/avatar/avatar.d.ts +2 -0
- package/dist/components/avatar/avatar.d.ts.map +1 -0
- package/dist/components/avatar/avatar.js +5 -0
- package/dist/components/avatar/avatar.js.map +1 -0
- package/dist/components/avatar/avatar.styles.d.ts +2 -0
- package/dist/components/avatar/avatar.styles.d.ts.map +1 -0
- package/dist/components/avatar/avatar.styles.js +55 -0
- package/dist/components/avatar/avatar.styles.js.map +1 -0
- package/dist/components/card/card.class.d.ts +52 -0
- package/dist/components/card/card.class.d.ts.map +1 -0
- package/dist/components/card/card.class.js +111 -0
- package/dist/components/card/card.class.js.map +1 -0
- package/dist/components/card/card.d.ts +2 -0
- package/dist/components/card/card.d.ts.map +1 -0
- package/dist/components/card/card.js +5 -0
- package/dist/components/card/card.js.map +1 -0
- package/dist/components/card/card.styles.d.ts +2 -0
- package/dist/components/card/card.styles.d.ts.map +1 -0
- package/dist/components/card/card.styles.js +77 -0
- package/dist/components/card/card.styles.js.map +1 -0
- package/dist/components/chart/chart.class.d.ts +11 -11
- package/dist/components/chart/chart.class.d.ts.map +1 -1
- package/dist/components/chart/chart.class.js +41 -0
- package/dist/components/chart/chart.class.js.map +1 -1
- package/dist/components/chart/lite-chart.class.d.ts +16 -9
- package/dist/components/chart/lite-chart.class.d.ts.map +1 -1
- package/dist/components/chart/lite-chart.class.js +99 -11
- package/dist/components/chart/lite-chart.class.js.map +1 -1
- package/dist/components/chart/lite-chart.styles.d.ts.map +1 -1
- package/dist/components/chart/lite-chart.styles.js +4 -0
- package/dist/components/chart/lite-chart.styles.js.map +1 -1
- package/dist/components/chat-composer/chat-composer.class.d.ts +12 -12
- package/dist/components/chat-composer/chat-composer.class.d.ts.map +1 -1
- package/dist/components/chat-composer/chat-composer.class.js +53 -0
- package/dist/components/chat-composer/chat-composer.class.js.map +1 -1
- package/dist/components/chat-message/chat-message.class.d.ts +3 -3
- package/dist/components/chat-message/chat-message.class.d.ts.map +1 -1
- package/dist/components/chat-message/chat-message.class.js +60 -0
- package/dist/components/chat-message/chat-message.class.js.map +1 -1
- package/dist/components/checkbox/checkbox.class.d.ts +5 -5
- package/dist/components/checkbox/checkbox.class.d.ts.map +1 -1
- package/dist/components/checkbox/checkbox.class.js +24 -0
- package/dist/components/checkbox/checkbox.class.js.map +1 -1
- package/dist/components/chip/chip-group.class.js +2 -2
- package/dist/components/chip/chip-group.class.js.map +1 -1
- package/dist/components/chip/chip.class.d.ts +18 -0
- package/dist/components/chip/chip.class.d.ts.map +1 -1
- package/dist/components/chip/chip.class.js +38 -1
- package/dist/components/chip/chip.class.js.map +1 -1
- package/dist/components/chip/chip.styles.d.ts.map +1 -1
- package/dist/components/chip/chip.styles.js +19 -1
- package/dist/components/chip/chip.styles.js.map +1 -1
- package/dist/components/code-block/code-block-core.class.d.ts +111 -0
- package/dist/components/code-block/code-block-core.class.d.ts.map +1 -0
- package/dist/components/code-block/code-block-core.class.js +363 -0
- package/dist/components/code-block/code-block-core.class.js.map +1 -0
- package/dist/components/code-block/code-block-core.d.ts +3 -0
- package/dist/components/code-block/code-block-core.d.ts.map +1 -0
- package/dist/components/code-block/code-block-core.js +6 -0
- package/dist/components/code-block/code-block-core.js.map +1 -0
- package/dist/components/code-block/code-block.class.d.ts +5 -5
- package/dist/components/code-block/code-block.class.d.ts.map +1 -1
- package/dist/components/code-block/code-block.class.js +65 -0
- package/dist/components/code-block/code-block.class.js.map +1 -1
- package/dist/components/combobox/combobox.class.d.ts +5 -5
- package/dist/components/combobox/combobox.class.d.ts.map +1 -1
- package/dist/components/combobox/combobox.class.js +38 -0
- package/dist/components/combobox/combobox.class.js.map +1 -1
- package/dist/components/conversation-item/conversation-item.class.d.ts +3 -3
- package/dist/components/conversation-item/conversation-item.class.d.ts.map +1 -1
- package/dist/components/conversation-item/conversation-item.class.js +69 -0
- package/dist/components/conversation-item/conversation-item.class.js.map +1 -1
- package/dist/components/copy-button/copy-button.class.d.ts +5 -5
- package/dist/components/copy-button/copy-button.class.d.ts.map +1 -1
- package/dist/components/copy-button/copy-button.class.js +13 -0
- package/dist/components/copy-button/copy-button.class.js.map +1 -1
- package/dist/components/date-picker/date-input.class.d.ts +10 -10
- package/dist/components/date-picker/date-input.class.d.ts.map +1 -1
- package/dist/components/date-picker/date-input.class.js +28 -0
- package/dist/components/date-picker/date-input.class.js.map +1 -1
- package/dist/components/date-picker/date-picker.class.d.ts +4 -4
- package/dist/components/date-picker/date-picker.class.d.ts.map +1 -1
- package/dist/components/date-picker/date-picker.class.js +28 -0
- package/dist/components/date-picker/date-picker.class.js.map +1 -1
- package/dist/components/dialog/dialog.class.d.ts +3 -3
- package/dist/components/dialog/dialog.class.js +3 -3
- package/dist/components/dialog/dialog.styles.d.ts.map +1 -1
- package/dist/components/dialog/dialog.styles.js +9 -2
- package/dist/components/dialog/dialog.styles.js.map +1 -1
- package/dist/components/diff-view/diff-line-diff.d.ts +13 -0
- package/dist/components/diff-view/diff-line-diff.d.ts.map +1 -0
- package/dist/components/diff-view/diff-line-diff.js +45 -0
- package/dist/components/diff-view/diff-line-diff.js.map +1 -0
- package/dist/components/diff-view/diff-view.class.d.ts +40 -0
- package/dist/components/diff-view/diff-view.class.d.ts.map +1 -0
- package/dist/components/diff-view/diff-view.class.js +73 -0
- package/dist/components/diff-view/diff-view.class.js.map +1 -0
- package/dist/components/diff-view/diff-view.d.ts +2 -0
- package/dist/components/diff-view/diff-view.d.ts.map +1 -0
- package/dist/components/diff-view/diff-view.js +5 -0
- package/dist/components/diff-view/diff-view.js.map +1 -0
- package/dist/components/diff-view/diff-view.styles.d.ts +2 -0
- package/dist/components/diff-view/diff-view.styles.d.ts.map +1 -0
- package/dist/components/diff-view/diff-view.styles.js +49 -0
- package/dist/components/diff-view/diff-view.styles.js.map +1 -0
- package/dist/components/document-preview/document-preview.class.d.ts +9 -9
- package/dist/components/document-preview/document-preview.class.d.ts.map +1 -1
- package/dist/components/document-preview/document-preview.class.js +83 -0
- package/dist/components/document-preview/document-preview.class.js.map +1 -1
- package/dist/components/empty/empty.class.d.ts +6 -0
- package/dist/components/empty/empty.class.d.ts.map +1 -1
- package/dist/components/empty/empty.class.js +28 -2
- package/dist/components/empty/empty.class.js.map +1 -1
- package/dist/components/empty/empty.styles.js +2 -2
- package/dist/components/export-button/export-button.class.d.ts +8 -8
- package/dist/components/export-button/export-button.class.d.ts.map +1 -1
- package/dist/components/export-button/export-button.class.js +13 -0
- package/dist/components/export-button/export-button.class.js.map +1 -1
- package/dist/components/file-input/file-input.class.d.ts +6 -6
- package/dist/components/file-input/file-input.class.d.ts.map +1 -1
- package/dist/components/file-input/file-input.class.js +14 -0
- package/dist/components/file-input/file-input.class.js.map +1 -1
- package/dist/components/generation-status/generation-status.class.d.ts +3 -3
- package/dist/components/generation-status/generation-status.class.d.ts.map +1 -1
- package/dist/components/generation-status/generation-status.class.js +66 -0
- package/dist/components/generation-status/generation-status.class.js.map +1 -1
- package/dist/components/graph/graph.class.d.ts +14 -9
- package/dist/components/graph/graph.class.d.ts.map +1 -1
- package/dist/components/graph/graph.class.js +68 -3
- package/dist/components/graph/graph.class.js.map +1 -1
- package/dist/components/graph/graph.styles.d.ts.map +1 -1
- package/dist/components/graph/graph.styles.js +4 -0
- package/dist/components/graph/graph.styles.js.map +1 -1
- package/dist/components/heatmap/heatmap.class.d.ts +22 -11
- package/dist/components/heatmap/heatmap.class.d.ts.map +1 -1
- package/dist/components/heatmap/heatmap.class.js +86 -2
- package/dist/components/heatmap/heatmap.class.js.map +1 -1
- package/dist/components/json-viewer/json-viewer.class.d.ts +5 -5
- package/dist/components/json-viewer/json-viewer.class.d.ts.map +1 -1
- package/dist/components/json-viewer/json-viewer.class.js +22 -0
- package/dist/components/json-viewer/json-viewer.class.js.map +1 -1
- package/dist/components/map/map.class.d.ts +7 -7
- package/dist/components/map/map.class.d.ts.map +1 -1
- package/dist/components/map/map.class.js +27 -0
- package/dist/components/map/map.class.js.map +1 -1
- package/dist/components/markdown/markdown.class.d.ts +17 -9
- package/dist/components/markdown/markdown.class.d.ts.map +1 -1
- package/dist/components/markdown/markdown.class.js +74 -1
- package/dist/components/markdown/markdown.class.js.map +1 -1
- package/dist/components/mention-popover/mention-popover.class.d.ts +3 -3
- package/dist/components/mention-popover/mention-popover.class.d.ts.map +1 -1
- package/dist/components/mention-popover/mention-popover.class.js +113 -0
- package/dist/components/mention-popover/mention-popover.class.js.map +1 -1
- package/dist/components/menu/menu-item.class.d.ts +7 -7
- package/dist/components/menu/menu-item.class.d.ts.map +1 -1
- package/dist/components/menu/menu-item.class.js +55 -0
- package/dist/components/menu/menu-item.class.js.map +1 -1
- package/dist/components/menu/menu.class.d.ts +5 -5
- package/dist/components/menu/menu.class.d.ts.map +1 -1
- package/dist/components/menu/menu.class.js +84 -0
- package/dist/components/menu/menu.class.js.map +1 -1
- package/dist/components/model-select/model-select.class.d.ts +6 -6
- package/dist/components/model-select/model-select.class.d.ts.map +1 -1
- package/dist/components/model-select/model-select.class.js +32 -0
- package/dist/components/model-select/model-select.class.js.map +1 -1
- package/dist/components/playback/playback.class.d.ts +7 -7
- package/dist/components/playback/playback.class.d.ts.map +1 -1
- package/dist/components/playback/playback.class.js +13 -0
- package/dist/components/playback/playback.class.js.map +1 -1
- package/dist/components/poll-status/poll-status.class.d.ts +54 -0
- package/dist/components/poll-status/poll-status.class.d.ts.map +1 -0
- package/dist/components/poll-status/poll-status.class.js +150 -0
- package/dist/components/poll-status/poll-status.class.js.map +1 -0
- package/dist/components/poll-status/poll-status.d.ts +3 -0
- package/dist/components/poll-status/poll-status.d.ts.map +1 -0
- package/dist/components/poll-status/poll-status.js +6 -0
- package/dist/components/poll-status/poll-status.js.map +1 -0
- package/dist/components/poll-status/poll-status.styles.d.ts +2 -0
- package/dist/components/poll-status/poll-status.styles.d.ts.map +1 -0
- package/dist/components/poll-status/poll-status.styles.js +53 -0
- package/dist/components/poll-status/poll-status.styles.js.map +1 -0
- package/dist/components/segmented/segmented.class.d.ts +44 -0
- package/dist/components/segmented/segmented.class.d.ts.map +1 -0
- package/dist/components/segmented/segmented.class.js +100 -0
- package/dist/components/segmented/segmented.class.js.map +1 -0
- package/dist/components/segmented/segmented.d.ts +2 -0
- package/dist/components/segmented/segmented.d.ts.map +1 -0
- package/dist/components/segmented/segmented.js +5 -0
- package/dist/components/segmented/segmented.js.map +1 -0
- package/dist/components/segmented/segmented.styles.d.ts +2 -0
- package/dist/components/segmented/segmented.styles.d.ts.map +1 -0
- package/dist/components/segmented/segmented.styles.js +38 -0
- package/dist/components/segmented/segmented.styles.js.map +1 -0
- package/dist/components/select/select.class.d.ts +6 -6
- package/dist/components/select/select.class.d.ts.map +1 -1
- package/dist/components/select/select.class.js +57 -0
- package/dist/components/select/select.class.js.map +1 -1
- package/dist/components/select/select.styles.d.ts.map +1 -1
- package/dist/components/select/select.styles.js +6 -1
- package/dist/components/select/select.styles.js.map +1 -1
- package/dist/components/slider/slider.class.d.ts +11 -11
- package/dist/components/slider/slider.class.d.ts.map +1 -1
- package/dist/components/slider/slider.class.js +35 -0
- package/dist/components/slider/slider.class.js.map +1 -1
- package/dist/components/split/split.class.d.ts +3 -3
- package/dist/components/split/split.class.d.ts.map +1 -1
- package/dist/components/split/split.class.js +66 -3
- package/dist/components/split/split.class.js.map +1 -1
- package/dist/components/stat/stat.styles.d.ts.map +1 -1
- package/dist/components/stat/stat.styles.js +2 -0
- package/dist/components/stat/stat.styles.js.map +1 -1
- package/dist/components/stepper/stepper.class.d.ts +52 -0
- package/dist/components/stepper/stepper.class.d.ts.map +1 -0
- package/dist/components/stepper/stepper.class.js +138 -0
- package/dist/components/stepper/stepper.class.js.map +1 -0
- package/dist/components/stepper/stepper.d.ts +2 -0
- package/dist/components/stepper/stepper.d.ts.map +1 -0
- package/dist/components/stepper/stepper.js +5 -0
- package/dist/components/stepper/stepper.js.map +1 -0
- package/dist/components/stepper/stepper.styles.d.ts +2 -0
- package/dist/components/stepper/stepper.styles.d.ts.map +1 -0
- package/dist/components/stepper/stepper.styles.js +67 -0
- package/dist/components/stepper/stepper.styles.js.map +1 -0
- package/dist/components/stream-status/stream-status.class.d.ts +4 -4
- package/dist/components/stream-status/stream-status.class.d.ts.map +1 -1
- package/dist/components/stream-status/stream-status.class.js +79 -0
- package/dist/components/stream-status/stream-status.class.js.map +1 -1
- package/dist/components/switch/switch.class.d.ts +5 -5
- package/dist/components/switch/switch.class.d.ts.map +1 -1
- package/dist/components/switch/switch.class.js +24 -0
- package/dist/components/switch/switch.class.js.map +1 -1
- package/dist/components/table/table.class.d.ts +23 -12
- package/dist/components/table/table.class.d.ts.map +1 -1
- package/dist/components/table/table.class.js +68 -0
- package/dist/components/table/table.class.js.map +1 -1
- package/dist/components/table/table.styles.d.ts.map +1 -1
- package/dist/components/table/table.styles.js +14 -0
- package/dist/components/table/table.styles.js.map +1 -1
- package/dist/components/tabs/tabs.class.d.ts +5 -5
- package/dist/components/tabs/tabs.class.d.ts.map +1 -1
- package/dist/components/tabs/tabs.class.js +38 -0
- package/dist/components/tabs/tabs.class.js.map +1 -1
- package/dist/components/tabs/tabs.styles.d.ts.map +1 -1
- package/dist/components/tabs/tabs.styles.js +1 -0
- package/dist/components/tabs/tabs.styles.js.map +1 -1
- package/dist/components/time-range/time-range.class.d.ts +10 -10
- package/dist/components/time-range/time-range.class.d.ts.map +1 -1
- package/dist/components/time-range/time-range.class.js +28 -0
- package/dist/components/time-range/time-range.class.js.map +1 -1
- package/dist/components/toast/toast-item.class.d.ts +6 -6
- package/dist/components/toast/toast-item.class.d.ts.map +1 -1
- package/dist/components/toast/toast-item.class.js +17 -0
- package/dist/components/toast/toast-item.class.js.map +1 -1
- package/dist/components/tool-approval-dialog/tool-approval-dialog.class.d.ts +3 -3
- package/dist/components/tool-approval-dialog/tool-approval-dialog.class.d.ts.map +1 -1
- package/dist/components/tool-approval-dialog/tool-approval-dialog.class.js +71 -0
- package/dist/components/tool-approval-dialog/tool-approval-dialog.class.js.map +1 -1
- package/dist/components/tool-param-form/tool-param-form.class.d.ts +9 -9
- package/dist/components/tool-param-form/tool-param-form.class.d.ts.map +1 -1
- package/dist/components/tool-param-form/tool-param-form.class.js +61 -0
- package/dist/components/tool-param-form/tool-param-form.class.js.map +1 -1
- package/dist/components/tool-result-view/tool-result-view.class.d.ts +6 -6
- package/dist/components/tool-result-view/tool-result-view.class.d.ts.map +1 -1
- package/dist/components/tool-result-view/tool-result-view.class.js +27 -0
- package/dist/components/tool-result-view/tool-result-view.class.js.map +1 -1
- package/dist/components/tree/tree-node.class.d.ts +9 -9
- package/dist/components/tree/tree-node.class.d.ts.map +1 -1
- package/dist/components/tree/tree-node.class.js +19 -0
- package/dist/components/tree/tree-node.class.js.map +1 -1
- package/dist/components/virtual-list/virtual-list.class.d.ts +4 -4
- package/dist/components/virtual-list/virtual-list.class.d.ts.map +1 -1
- package/dist/components/virtual-list/virtual-list.class.js +89 -0
- package/dist/components/virtual-list/virtual-list.class.js.map +1 -1
- package/dist/components/widget/widget.class.d.ts +34 -4
- package/dist/components/widget/widget.class.d.ts.map +1 -1
- package/dist/components/widget/widget.class.js +106 -3
- package/dist/components/widget/widget.class.js.map +1 -1
- package/dist/components/widget/widget.styles.d.ts.map +1 -1
- package/dist/components/widget/widget.styles.js +41 -1
- package/dist/components/widget/widget.styles.js.map +1 -1
- package/dist/components/word-cloud/word-cloud.class.d.ts +7 -7
- package/dist/components/word-cloud/word-cloud.class.d.ts.map +1 -1
- package/dist/components/word-cloud/word-cloud.class.js +28 -0
- package/dist/components/word-cloud/word-cloud.class.js.map +1 -1
- package/dist/internal/localization.d.ts +1 -1
- package/dist/internal/localization.d.ts.map +1 -1
- package/dist/internal/localization.js +1 -0
- package/dist/internal/localization.js.map +1 -1
- package/dist/internal/root-registration-allowlist.d.ts +1 -1
- package/dist/internal/root-registration-allowlist.d.ts.map +1 -1
- package/dist/internal/root-registration-allowlist.js +7 -0
- package/dist/internal/root-registration-allowlist.js.map +1 -1
- package/dist/lyra.d.ts +24 -0
- package/dist/lyra.d.ts.map +1 -1
- package/dist/lyra.js +15 -0
- package/dist/lyra.js.map +1 -1
- package/dist/testing/happy-dom-shims.d.ts +40 -0
- package/dist/testing/happy-dom-shims.d.ts.map +1 -0
- package/dist/testing/happy-dom-shims.js +52 -0
- package/dist/testing/happy-dom-shims.js.map +1 -0
- package/llms-full.txt +617 -35
- package/llms.txt +3 -1
- package/package.json +17 -2
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import { type TemplateResult, type PropertyValues } from 'lit';
|
|
2
|
+
import { LyraElement } from '../../internal/lyra-element.js';
|
|
3
|
+
import { type ShikiLanguageInput } from './code-loader.js';
|
|
4
|
+
import '../skeleton/skeleton.class.js';
|
|
5
|
+
export interface LyraCodeBlockCoreEventMap {
|
|
6
|
+
'lyra-copy': CustomEvent<{
|
|
7
|
+
text: string;
|
|
8
|
+
}>;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* `<lyra-code-block-core>` — a build-lean variant of `<lyra-code-block>` for
|
|
12
|
+
* a consumer whose `languages` map already covers every language it will
|
|
13
|
+
* ever render. It only ever calls `loadShikiHighlighterCore(this.languages)`
|
|
14
|
+
* (see `code-loader.ts`) — never `loadShikiHighlighter()`, the default
|
|
15
|
+
* ~200-language dynamic-import table loader `<lyra-code-block>` calls
|
|
16
|
+
* unconditionally unless its runtime `languagesOnly` flag is `true`. A
|
|
17
|
+
* runtime flag on that same module can't be proven always-`true` by a
|
|
18
|
+
* bundler, so the unconditional call (and everything shiki's main entry
|
|
19
|
+
* point can reach from it) always stays in the build output regardless of
|
|
20
|
+
* how that flag is used. This component's own module never textually
|
|
21
|
+
* contains a call to (or import of) `loadShikiHighlighter` at all, so a
|
|
22
|
+
* consumer importing this entry point instead of `code-block.js` gets a
|
|
23
|
+
* genuinely shiki-full-table-free build.
|
|
24
|
+
*
|
|
25
|
+
* A `language` value absent from `languages` always renders the plain
|
|
26
|
+
* `<pre><code>` fallback — there is no default/full-table highlighter here
|
|
27
|
+
* to fall back to, unlike `<lyra-code-block>`'s dynamic-import path for an
|
|
28
|
+
* unmapped language. That fallback is the *default* rendering path, not a
|
|
29
|
+
* degraded one, same as `<lyra-code-block>`'s own plain-text fallback.
|
|
30
|
+
*
|
|
31
|
+
* Everything else — `code`/`language`/`filename`/`copyable`/`collapsible`/
|
|
32
|
+
* `collapsed`/`maxHeight`, the copy button, the collapse header toggle, the
|
|
33
|
+
* loading-skeleton behavior while the fine-grained highlighter itself
|
|
34
|
+
* resolves — matches `<lyra-code-block>` exactly.
|
|
35
|
+
*
|
|
36
|
+
* @customElement lyra-code-block-core
|
|
37
|
+
* @event lyra-copy - The copy button was activated. `detail: { text }` is
|
|
38
|
+
* always the raw `code` value (never the highlighted HTML), and always
|
|
39
|
+
* fires regardless of whether the actual OS clipboard write succeeded —
|
|
40
|
+
* same convention as `<lyra-json-viewer>`'s own copy button.
|
|
41
|
+
* @event lyra-toggle - The collapse/expand header button was activated.
|
|
42
|
+
* `detail: { collapsed }` — same event name and shape convention as
|
|
43
|
+
* `<lyra-thinking-panel>`'s own `lyra-toggle`.
|
|
44
|
+
* @csspart base - The outer container.
|
|
45
|
+
* @csspart header - The row above the code (filename/language/copy/toggle),
|
|
46
|
+
* present whenever there's anything to put in it.
|
|
47
|
+
* @csspart filename - The `filename` text, when set.
|
|
48
|
+
* @csspart language - The `language` badge, when set, so the language is
|
|
49
|
+
* exposed to assistive tech as visible text rather than only a `language`
|
|
50
|
+
* attribute a screen reader would never announce.
|
|
51
|
+
* @csspart copy-button - The copy-to-clipboard button, when `copyable`.
|
|
52
|
+
* @csspart toggle - The collapse/expand chevron button, when `collapsible`.
|
|
53
|
+
* @csspart body - The scrollable region wrapping the code (or the loading
|
|
54
|
+
* skeleton); respects `max-height`, `hidden` while `collapsible` and
|
|
55
|
+
* `collapsed`.
|
|
56
|
+
* @csspart pre - The rendered `<pre>` — shiki's own in the highlighted path,
|
|
57
|
+
* this component's own plain one in the fallback path.
|
|
58
|
+
* @csspart code - The rendered `<code>`, same split as `pre` above.
|
|
59
|
+
*/
|
|
60
|
+
export declare class LyraCodeBlockCore extends LyraElement<LyraCodeBlockCoreEventMap> {
|
|
61
|
+
static styles: import("lit").CSSResultGroup[];
|
|
62
|
+
/** The raw source text. */
|
|
63
|
+
code: string;
|
|
64
|
+
/** A shiki-recognized language id or alias (e.g. `"javascript"`,
|
|
65
|
+
* `"python"`, `"json"`). When unset, or when it isn't a key in
|
|
66
|
+
* `languages`, the code renders as plain unhighlighted text — this
|
|
67
|
+
* component has no default/full-table highlighter to fall back to. */
|
|
68
|
+
language: string;
|
|
69
|
+
/** Shown in the header above the code, when set. */
|
|
70
|
+
filename: string;
|
|
71
|
+
/** Whether the code region can be collapsed via a header toggle. */
|
|
72
|
+
collapsible: boolean;
|
|
73
|
+
/** Whether the code region is currently hidden. Only has a visible effect
|
|
74
|
+
* while `collapsible` is also true. */
|
|
75
|
+
collapsed: boolean;
|
|
76
|
+
/** Shows a copy-to-clipboard button in the header. */
|
|
77
|
+
copyable: boolean;
|
|
78
|
+
/** A CSS length (e.g. `"20rem"`); once set, the code scrolls internally
|
|
79
|
+
* past this height instead of growing the page. */
|
|
80
|
+
maxHeight: string;
|
|
81
|
+
/** Grammar definitions this instance can highlight, e.g. `{ json: jsonGrammar }` (import from
|
|
82
|
+
* `shiki/langs/<name>.mjs`). This component has no default/full-table fallback highlighter --
|
|
83
|
+
* a `language` absent from this map always renders the plain-text fallback. Empty (the
|
|
84
|
+
* default) never highlights at all. */
|
|
85
|
+
languages: Record<string, ShikiLanguageInput>;
|
|
86
|
+
private highlightedHtml;
|
|
87
|
+
private shikiReady;
|
|
88
|
+
private justCopied;
|
|
89
|
+
private highlighter?;
|
|
90
|
+
private highlightToken;
|
|
91
|
+
private copyTimeoutId?;
|
|
92
|
+
private readonly bodyId;
|
|
93
|
+
connectedCallback(): void;
|
|
94
|
+
disconnectedCallback(): void;
|
|
95
|
+
private preSuppliedGrammar;
|
|
96
|
+
protected willUpdate(changed: PropertyValues): void;
|
|
97
|
+
protected updated(): void;
|
|
98
|
+
private syncHighlight;
|
|
99
|
+
private tokenize;
|
|
100
|
+
private writeClipboard;
|
|
101
|
+
private copy;
|
|
102
|
+
private toggleCollapsed;
|
|
103
|
+
private renderHeader;
|
|
104
|
+
render(): TemplateResult;
|
|
105
|
+
}
|
|
106
|
+
declare global {
|
|
107
|
+
interface HTMLElementTagNameMap {
|
|
108
|
+
'lyra-code-block-core': LyraCodeBlockCore;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
//# sourceMappingURL=code-block-core.class.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"code-block-core.class.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-block-core.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D,OAAO,EAAqE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE9H,OAAO,+BAA+B,CAAC;AA4BvC,MAAM,WAAW,yBAAyB;IACxC,WAAW,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,qBAAa,iBAAkB,SAAQ,WAAW,CAAC,yBAAyB,CAAC;IAC3E,MAAM,CAAC,MAAM,iCAAgC;IAE7C,2BAA2B;IACf,IAAI,SAAM;IAEtB;;;2EAGuE;IAC3D,QAAQ,SAAM;IAE1B,oDAAoD;IACxC,QAAQ,SAAM;IAE1B,oEAAoE;IACxB,WAAW,UAAS;IAEhE;4CACwC;IACI,SAAS,UAAS;IAE9D,sDAAsD;IACV,QAAQ,UAAQ;IAE5D;wDACoD;IACb,SAAS,SAAM;IAEtD;;;4CAGwC;IACR,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAM;IAO1E,OAAO,CAAC,eAAe,CAAuB;IAK9C,OAAO,CAAC,UAAU,CAAS;IAE3B,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,WAAW,CAAC,CAA8B;IAKlD,OAAO,CAAC,cAAc,CAAK;IAE3B,OAAO,CAAC,aAAa,CAAC,CAAgC;IAEtD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA6B;IAEpD,iBAAiB,IAAI,IAAI,CAQxB;IAED,oBAAoB,IAAI,IAAI,CAG3B;IAKD,OAAO,CAAC,kBAAkB;IAS1B,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAKlD;IAED,SAAS,CAAC,OAAO,IAAI,IAAI,CAIxB;IAED,OAAO,CAAC,aAAa;IA0CrB,OAAO,CAAC,QAAQ;IAoBhB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,IAAI,CAQV;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,YAAY;IA4CpB,MAAM,IAAI,cAAc,CA0BvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,iBAAiB,CAAC;KAC3C;CACF"}
|
|
@@ -0,0 +1,363 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html, nothing } from 'lit';
|
|
8
|
+
import { property, state } from 'lit/decorators.js';
|
|
9
|
+
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
10
|
+
import { LyraElement } from '../../internal/lyra-element.js';
|
|
11
|
+
import { nextId } from '../../internal/a11y.js';
|
|
12
|
+
import { chevronIcon } from '../../internal/icons.js';
|
|
13
|
+
import { loadShikiHighlighterCore, SHIKI_THEMES } from './code-loader.js';
|
|
14
|
+
import { styles } from './code-block.styles.js';
|
|
15
|
+
import '../skeleton/skeleton.class.js';
|
|
16
|
+
/** How long the copy button's confirmation state lasts before reverting. */
|
|
17
|
+
const COPY_CONFIRM_MS = 1500;
|
|
18
|
+
/**
|
|
19
|
+
* Rewrites shiki's generated `<pre>`/`<code>` hast nodes so they carry this
|
|
20
|
+
* component's own `part="pre"`/`part="code"` hooks — the same single-pass
|
|
21
|
+
* "inject part attributes while rendering, not a second DOM walk after
|
|
22
|
+
* insertion" approach `<lyra-markdown>`'s renderer override uses, applied
|
|
23
|
+
* here via shiki's own transformer API instead of a custom marked renderer.
|
|
24
|
+
* Also strips shiki's own default `tabindex="0"` from the `<pre>` — this
|
|
25
|
+
* component's `[part="body"]` wrapper (see `render()`) is the single
|
|
26
|
+
* scrollable/focusable region for the code area, and leaving shiki's own
|
|
27
|
+
* tabindex in place would add a second, redundant tab stop over the same
|
|
28
|
+
* scrollable content.
|
|
29
|
+
*/
|
|
30
|
+
const partTransformer = {
|
|
31
|
+
name: 'lyra-code-block-parts',
|
|
32
|
+
pre(node) {
|
|
33
|
+
node.properties.part = ['pre'];
|
|
34
|
+
delete node.properties.tabindex;
|
|
35
|
+
},
|
|
36
|
+
code(node) {
|
|
37
|
+
node.properties.part = ['code'];
|
|
38
|
+
},
|
|
39
|
+
};
|
|
40
|
+
/**
|
|
41
|
+
* `<lyra-code-block-core>` — a build-lean variant of `<lyra-code-block>` for
|
|
42
|
+
* a consumer whose `languages` map already covers every language it will
|
|
43
|
+
* ever render. It only ever calls `loadShikiHighlighterCore(this.languages)`
|
|
44
|
+
* (see `code-loader.ts`) — never `loadShikiHighlighter()`, the default
|
|
45
|
+
* ~200-language dynamic-import table loader `<lyra-code-block>` calls
|
|
46
|
+
* unconditionally unless its runtime `languagesOnly` flag is `true`. A
|
|
47
|
+
* runtime flag on that same module can't be proven always-`true` by a
|
|
48
|
+
* bundler, so the unconditional call (and everything shiki's main entry
|
|
49
|
+
* point can reach from it) always stays in the build output regardless of
|
|
50
|
+
* how that flag is used. This component's own module never textually
|
|
51
|
+
* contains a call to (or import of) `loadShikiHighlighter` at all, so a
|
|
52
|
+
* consumer importing this entry point instead of `code-block.js` gets a
|
|
53
|
+
* genuinely shiki-full-table-free build.
|
|
54
|
+
*
|
|
55
|
+
* A `language` value absent from `languages` always renders the plain
|
|
56
|
+
* `<pre><code>` fallback — there is no default/full-table highlighter here
|
|
57
|
+
* to fall back to, unlike `<lyra-code-block>`'s dynamic-import path for an
|
|
58
|
+
* unmapped language. That fallback is the *default* rendering path, not a
|
|
59
|
+
* degraded one, same as `<lyra-code-block>`'s own plain-text fallback.
|
|
60
|
+
*
|
|
61
|
+
* Everything else — `code`/`language`/`filename`/`copyable`/`collapsible`/
|
|
62
|
+
* `collapsed`/`maxHeight`, the copy button, the collapse header toggle, the
|
|
63
|
+
* loading-skeleton behavior while the fine-grained highlighter itself
|
|
64
|
+
* resolves — matches `<lyra-code-block>` exactly.
|
|
65
|
+
*
|
|
66
|
+
* @customElement lyra-code-block-core
|
|
67
|
+
* @event lyra-copy - The copy button was activated. `detail: { text }` is
|
|
68
|
+
* always the raw `code` value (never the highlighted HTML), and always
|
|
69
|
+
* fires regardless of whether the actual OS clipboard write succeeded —
|
|
70
|
+
* same convention as `<lyra-json-viewer>`'s own copy button.
|
|
71
|
+
* @event lyra-toggle - The collapse/expand header button was activated.
|
|
72
|
+
* `detail: { collapsed }` — same event name and shape convention as
|
|
73
|
+
* `<lyra-thinking-panel>`'s own `lyra-toggle`.
|
|
74
|
+
* @csspart base - The outer container.
|
|
75
|
+
* @csspart header - The row above the code (filename/language/copy/toggle),
|
|
76
|
+
* present whenever there's anything to put in it.
|
|
77
|
+
* @csspart filename - The `filename` text, when set.
|
|
78
|
+
* @csspart language - The `language` badge, when set, so the language is
|
|
79
|
+
* exposed to assistive tech as visible text rather than only a `language`
|
|
80
|
+
* attribute a screen reader would never announce.
|
|
81
|
+
* @csspart copy-button - The copy-to-clipboard button, when `copyable`.
|
|
82
|
+
* @csspart toggle - The collapse/expand chevron button, when `collapsible`.
|
|
83
|
+
* @csspart body - The scrollable region wrapping the code (or the loading
|
|
84
|
+
* skeleton); respects `max-height`, `hidden` while `collapsible` and
|
|
85
|
+
* `collapsed`.
|
|
86
|
+
* @csspart pre - The rendered `<pre>` — shiki's own in the highlighted path,
|
|
87
|
+
* this component's own plain one in the fallback path.
|
|
88
|
+
* @csspart code - The rendered `<code>`, same split as `pre` above.
|
|
89
|
+
*/
|
|
90
|
+
export class LyraCodeBlockCore extends LyraElement {
|
|
91
|
+
constructor() {
|
|
92
|
+
super(...arguments);
|
|
93
|
+
/** The raw source text. */
|
|
94
|
+
this.code = '';
|
|
95
|
+
/** A shiki-recognized language id or alias (e.g. `"javascript"`,
|
|
96
|
+
* `"python"`, `"json"`). When unset, or when it isn't a key in
|
|
97
|
+
* `languages`, the code renders as plain unhighlighted text — this
|
|
98
|
+
* component has no default/full-table highlighter to fall back to. */
|
|
99
|
+
this.language = '';
|
|
100
|
+
/** Shown in the header above the code, when set. */
|
|
101
|
+
this.filename = '';
|
|
102
|
+
/** Whether the code region can be collapsed via a header toggle. */
|
|
103
|
+
this.collapsible = false;
|
|
104
|
+
/** Whether the code region is currently hidden. Only has a visible effect
|
|
105
|
+
* while `collapsible` is also true. */
|
|
106
|
+
this.collapsed = false;
|
|
107
|
+
/** Shows a copy-to-clipboard button in the header. */
|
|
108
|
+
this.copyable = true;
|
|
109
|
+
/** A CSS length (e.g. `"20rem"`); once set, the code scrolls internally
|
|
110
|
+
* past this height instead of growing the page. */
|
|
111
|
+
this.maxHeight = '';
|
|
112
|
+
/** Grammar definitions this instance can highlight, e.g. `{ json: jsonGrammar }` (import from
|
|
113
|
+
* `shiki/langs/<name>.mjs`). This component has no default/full-table fallback highlighter --
|
|
114
|
+
* a `language` absent from this map always renders the plain-text fallback. Empty (the
|
|
115
|
+
* default) never highlights at all. */
|
|
116
|
+
this.languages = {};
|
|
117
|
+
// `null` covers every reason the plain-text fallback is showing: `language`
|
|
118
|
+
// is unset, isn't a key in `languages`, or the fine-grained highlighter
|
|
119
|
+
// hasn't resolved yet -- `render()` doesn't need to (and can't usefully)
|
|
120
|
+
// tell these apart, same rationale as <lyra-markdown>'s identically-shaped
|
|
121
|
+
// field.
|
|
122
|
+
this.highlightedHtml = null;
|
|
123
|
+
// Becomes true once loadShikiHighlighterCore()'s promise has settled,
|
|
124
|
+
// whether or not it actually resolved to a highlighter -- gates the
|
|
125
|
+
// skeleton (see the class doc), not the highlighting itself.
|
|
126
|
+
this.shikiReady = false;
|
|
127
|
+
this.justCopied = false;
|
|
128
|
+
// Guards the async per-language load in syncHighlight() against a
|
|
129
|
+
// `code`/`language` change that arrives before a previous load resolves --
|
|
130
|
+
// only the result matching the *current* token is ever applied.
|
|
131
|
+
this.highlightToken = 0;
|
|
132
|
+
this.bodyId = nextId('code-block-body');
|
|
133
|
+
this.copy = () => {
|
|
134
|
+
this.writeClipboard(this.code);
|
|
135
|
+
this.emit('lyra-copy', { text: this.code });
|
|
136
|
+
this.justCopied = true;
|
|
137
|
+
clearTimeout(this.copyTimeoutId);
|
|
138
|
+
this.copyTimeoutId = setTimeout(() => {
|
|
139
|
+
this.justCopied = false;
|
|
140
|
+
}, COPY_CONFIRM_MS);
|
|
141
|
+
};
|
|
142
|
+
this.toggleCollapsed = () => {
|
|
143
|
+
this.collapsed = !this.collapsed;
|
|
144
|
+
this.emit('lyra-toggle', { collapsed: this.collapsed });
|
|
145
|
+
};
|
|
146
|
+
}
|
|
147
|
+
static { this.styles = [LyraElement.styles, styles]; }
|
|
148
|
+
connectedCallback() {
|
|
149
|
+
super.connectedCallback();
|
|
150
|
+
if (Object.keys(this.languages).length === 0)
|
|
151
|
+
return; // no languages supplied -- stays in the plain-text-fallback state permanently, same as languagesOnly + no matching grammar already behaves in lyra-code-block today
|
|
152
|
+
void loadShikiHighlighterCore(this.languages).then((hl) => {
|
|
153
|
+
this.highlighter = hl;
|
|
154
|
+
this.shikiReady = true;
|
|
155
|
+
this.syncHighlight();
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
disconnectedCallback() {
|
|
159
|
+
super.disconnectedCallback();
|
|
160
|
+
clearTimeout(this.copyTimeoutId);
|
|
161
|
+
}
|
|
162
|
+
// The `languages` entry for the *current* `language`, if any -- shared by
|
|
163
|
+
// `willUpdate()`/`updated()`/`render()`/`syncHighlight()` so they all agree
|
|
164
|
+
// on whether this language is highlightable at all.
|
|
165
|
+
preSuppliedGrammar() {
|
|
166
|
+
return this.languages?.[this.language];
|
|
167
|
+
}
|
|
168
|
+
// Mutating `highlightedHtml` here (rather than in `updated()`) absorbs the
|
|
169
|
+
// synchronous case -- language already loaded, see `syncHighlight()` --
|
|
170
|
+
// into this same update cycle instead of scheduling a second one, Lit's
|
|
171
|
+
// documented pattern for deriving one reactive property from a change to
|
|
172
|
+
// others (same approach <lyra-markdown>'s `willUpdate` takes).
|
|
173
|
+
willUpdate(changed) {
|
|
174
|
+
if (!(changed.has('code') || changed.has('language') || changed.has('languages')))
|
|
175
|
+
return;
|
|
176
|
+
if (this.shikiReady || this.preSuppliedGrammar()) {
|
|
177
|
+
this.syncHighlight();
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
updated() {
|
|
181
|
+
const showingSkeleton = !this.shikiReady && !!this.language && !!this.preSuppliedGrammar();
|
|
182
|
+
if (showingSkeleton)
|
|
183
|
+
this.setAttribute('aria-busy', 'true');
|
|
184
|
+
else
|
|
185
|
+
this.removeAttribute('aria-busy');
|
|
186
|
+
}
|
|
187
|
+
syncHighlight() {
|
|
188
|
+
// Bumped unconditionally -- on *every* call, not just the async branch
|
|
189
|
+
// below -- so that a call landing on the synchronous already-loaded
|
|
190
|
+
// branch still invalidates any earlier in-flight load from a previous
|
|
191
|
+
// call. Without this, a load kicked off by an older call can resolve
|
|
192
|
+
// after a newer call has already rendered correct synchronous output,
|
|
193
|
+
// and overwrite it with stale tokenization.
|
|
194
|
+
const token = ++this.highlightToken;
|
|
195
|
+
const lang = this.language;
|
|
196
|
+
if (!lang) {
|
|
197
|
+
this.highlightedHtml = null;
|
|
198
|
+
return;
|
|
199
|
+
}
|
|
200
|
+
const languages = this.languages;
|
|
201
|
+
if (!languages?.[lang]) {
|
|
202
|
+
// Not in the supplied languages map -- there is no default
|
|
203
|
+
// highlighter to fall back to in this variant, so this always
|
|
204
|
+
// renders the plain-text fallback, unlike <lyra-code-block>'s
|
|
205
|
+
// dynamic-import path for an unmapped language.
|
|
206
|
+
this.highlightedHtml = null;
|
|
207
|
+
return;
|
|
208
|
+
}
|
|
209
|
+
// Mirrors <lyra-code-block>'s own fine-grained branch: calls
|
|
210
|
+
// loadShikiHighlighterCore() directly rather than only reading a
|
|
211
|
+
// cached `this.highlighter` -- `languages` may be supplied any time
|
|
212
|
+
// after `connectedCallback()` already ran (e.g. set as a property right
|
|
213
|
+
// after creation), so this can't rely solely on that one-time eager
|
|
214
|
+
// load. loadShikiHighlighterCore() itself caches by `languages` object
|
|
215
|
+
// identity, so a call here that lands on the same map
|
|
216
|
+
// connectedCallback() already kicked off just resolves the shared
|
|
217
|
+
// cached promise instead of loading twice.
|
|
218
|
+
this.highlightedHtml = null;
|
|
219
|
+
void loadShikiHighlighterCore(languages).then((hl) => {
|
|
220
|
+
if (token !== this.highlightToken)
|
|
221
|
+
return; // superseded by a newer code/language/languages change
|
|
222
|
+
this.highlighter = hl;
|
|
223
|
+
this.shikiReady = true;
|
|
224
|
+
this.highlightedHtml = hl ? this.tokenize(hl, lang) : null;
|
|
225
|
+
});
|
|
226
|
+
}
|
|
227
|
+
tokenize(hl, lang) {
|
|
228
|
+
try {
|
|
229
|
+
return hl.codeToHtml(this.code, {
|
|
230
|
+
lang,
|
|
231
|
+
// shiki's generated per-token colors are theme-specific inline
|
|
232
|
+
// styles/CSS variables (from SHIKI_THEMES's github-light/github-dark
|
|
233
|
+
// theme data), not this library's --lyra-* design tokens -- the one
|
|
234
|
+
// deliberate exception to every other color in this component being
|
|
235
|
+
// a --lyra-* token. See the dark-mode override in
|
|
236
|
+
// code-block.styles.ts for how the dark half of this activates.
|
|
237
|
+
themes: SHIKI_THEMES,
|
|
238
|
+
transformers: [partTransformer],
|
|
239
|
+
});
|
|
240
|
+
}
|
|
241
|
+
catch {
|
|
242
|
+
// Malformed input for this grammar, or any other shiki-internal
|
|
243
|
+
// failure -- fall back to plain text rather than a blank code block.
|
|
244
|
+
return null;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
writeClipboard(text) {
|
|
248
|
+
try {
|
|
249
|
+
// navigator.clipboard is absent in insecure contexts / older browsers,
|
|
250
|
+
// and some engines throw synchronously rather than rejecting -- either
|
|
251
|
+
// way this is best-effort; copy() below always emits lyra-copy
|
|
252
|
+
// regardless of whether the OS clipboard was actually reached. Same
|
|
253
|
+
// precedent as <lyra-json-viewer>'s own copy button.
|
|
254
|
+
void navigator.clipboard?.writeText(text)?.catch(() => { });
|
|
255
|
+
}
|
|
256
|
+
catch {
|
|
257
|
+
// see above
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
renderHeader() {
|
|
261
|
+
return html `
|
|
262
|
+
<div part="header">
|
|
263
|
+
${this.collapsible
|
|
264
|
+
? html `
|
|
265
|
+
<button
|
|
266
|
+
part="toggle"
|
|
267
|
+
type="button"
|
|
268
|
+
aria-expanded=${this.collapsed ? 'false' : 'true'}
|
|
269
|
+
aria-controls=${this.bodyId}
|
|
270
|
+
aria-label=${`${this.localize(this.collapsed ? 'expand' : 'collapse')} code`}
|
|
271
|
+
@click=${this.toggleCollapsed}
|
|
272
|
+
>
|
|
273
|
+
<span class="chevron" aria-hidden="true">${chevronIcon()}</span>
|
|
274
|
+
</button>
|
|
275
|
+
`
|
|
276
|
+
: nothing}
|
|
277
|
+
${this.filename ? html `<span part="filename">${this.filename}</span>` : nothing}
|
|
278
|
+
${this.language ? html `<span part="language">${this.language}</span>` : nothing}
|
|
279
|
+
${this.copyable
|
|
280
|
+
? html `
|
|
281
|
+
<button
|
|
282
|
+
part="copy-button"
|
|
283
|
+
type="button"
|
|
284
|
+
aria-label=${this.justCopied ? `${this.localize('copied')} to clipboard` : `${this.localize('copy')} code`}
|
|
285
|
+
@click=${this.copy}
|
|
286
|
+
>
|
|
287
|
+
${this.justCopied ? this.localize('copied') : this.localize('copy')}
|
|
288
|
+
</button>
|
|
289
|
+
`
|
|
290
|
+
: nothing}
|
|
291
|
+
</div>
|
|
292
|
+
`;
|
|
293
|
+
}
|
|
294
|
+
// `[part="body"]` is `tabindex="0"` because it's the scrollable region for
|
|
295
|
+
// arbitrarily-wide/tall code (max-height, plus horizontal overflow from
|
|
296
|
+
// long lines) -- a scrollable region with no other focusable content of
|
|
297
|
+
// its own is otherwise unreachable by keyboard, same reasoning
|
|
298
|
+
// lyra-virtual-list's own `[part="base"]` documents for its identical
|
|
299
|
+
// tabindex. `role="group"` (rather than e.g. `region`, a page landmark
|
|
300
|
+
// role) plus `aria-label` gives it an accessible name without claiming
|
|
301
|
+
// landmark/navigation significance for what is, structurally, just one
|
|
302
|
+
// small piece of a larger document.
|
|
303
|
+
render() {
|
|
304
|
+
const hasHeader = !!this.filename || !!this.language || this.copyable || this.collapsible;
|
|
305
|
+
const showSkeleton = !this.shikiReady && !!this.language && !!this.preSuppliedGrammar();
|
|
306
|
+
const bodyHidden = this.collapsible && this.collapsed;
|
|
307
|
+
const bodyLabel = this.filename || (this.language ? `${this.language} code` : 'Code');
|
|
308
|
+
return html `
|
|
309
|
+
<div part="base">
|
|
310
|
+
${hasHeader ? this.renderHeader() : nothing}
|
|
311
|
+
<div
|
|
312
|
+
part="body"
|
|
313
|
+
id=${this.bodyId}
|
|
314
|
+
role="group"
|
|
315
|
+
aria-label=${bodyLabel}
|
|
316
|
+
tabindex="0"
|
|
317
|
+
?hidden=${bodyHidden}
|
|
318
|
+
style=${this.maxHeight ? `--lyra-code-block-max-height:${this.maxHeight}` : nothing}
|
|
319
|
+
>
|
|
320
|
+
${showSkeleton
|
|
321
|
+
? html `<lyra-skeleton variant="rect"></lyra-skeleton>`
|
|
322
|
+
: this.highlightedHtml !== null
|
|
323
|
+
? unsafeHTML(this.highlightedHtml)
|
|
324
|
+
: html `<pre part="pre"><code part="code">${this.code}</code></pre>`}
|
|
325
|
+
</div>
|
|
326
|
+
</div>
|
|
327
|
+
`;
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
__decorate([
|
|
331
|
+
property()
|
|
332
|
+
], LyraCodeBlockCore.prototype, "code", void 0);
|
|
333
|
+
__decorate([
|
|
334
|
+
property()
|
|
335
|
+
], LyraCodeBlockCore.prototype, "language", void 0);
|
|
336
|
+
__decorate([
|
|
337
|
+
property()
|
|
338
|
+
], LyraCodeBlockCore.prototype, "filename", void 0);
|
|
339
|
+
__decorate([
|
|
340
|
+
property({ type: Boolean, reflect: true })
|
|
341
|
+
], LyraCodeBlockCore.prototype, "collapsible", void 0);
|
|
342
|
+
__decorate([
|
|
343
|
+
property({ type: Boolean, reflect: true })
|
|
344
|
+
], LyraCodeBlockCore.prototype, "collapsed", void 0);
|
|
345
|
+
__decorate([
|
|
346
|
+
property({ type: Boolean, reflect: true })
|
|
347
|
+
], LyraCodeBlockCore.prototype, "copyable", void 0);
|
|
348
|
+
__decorate([
|
|
349
|
+
property({ attribute: 'max-height' })
|
|
350
|
+
], LyraCodeBlockCore.prototype, "maxHeight", void 0);
|
|
351
|
+
__decorate([
|
|
352
|
+
property({ attribute: false })
|
|
353
|
+
], LyraCodeBlockCore.prototype, "languages", void 0);
|
|
354
|
+
__decorate([
|
|
355
|
+
state()
|
|
356
|
+
], LyraCodeBlockCore.prototype, "highlightedHtml", void 0);
|
|
357
|
+
__decorate([
|
|
358
|
+
state()
|
|
359
|
+
], LyraCodeBlockCore.prototype, "shikiReady", void 0);
|
|
360
|
+
__decorate([
|
|
361
|
+
state()
|
|
362
|
+
], LyraCodeBlockCore.prototype, "justCopied", void 0);
|
|
363
|
+
//# sourceMappingURL=code-block-core.class.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"code-block-core.class.js","sourceRoot":"","sources":["../../../src/components/code-block/code-block-core.class.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"code-block-core.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-block-core.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAG3C,OAAO,yBAAyB,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export * from './code-block-core.class.js';
|
|
2
|
+
import { LyraCodeBlockCore } from './code-block-core.class.js';
|
|
3
|
+
import { defineElement } from '../../internal/prefix.js';
|
|
4
|
+
import "../skeleton/skeleton.js";
|
|
5
|
+
defineElement('code-block-core', LyraCodeBlockCore);
|
|
6
|
+
//# sourceMappingURL=code-block-core.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"code-block-core.js","sourceRoot":"","sources":["../../../src/components/code-block/code-block-core.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,yBAAyB,CAAC;AACjC,aAAa,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC"}
|
|
@@ -2,6 +2,11 @@ import { type TemplateResult, type PropertyValues } from 'lit';
|
|
|
2
2
|
import { LyraElement } from '../../internal/lyra-element.js';
|
|
3
3
|
import { type ShikiLanguageInput } from './code-loader.js';
|
|
4
4
|
import '../skeleton/skeleton.class.js';
|
|
5
|
+
export interface LyraCodeBlockEventMap {
|
|
6
|
+
'lyra-copy': CustomEvent<{
|
|
7
|
+
text: string;
|
|
8
|
+
}>;
|
|
9
|
+
}
|
|
5
10
|
/**
|
|
6
11
|
* `<lyra-code-block>` — fenced code display with optional lazy syntax
|
|
7
12
|
* highlighting and a copy button. No highlighting grammar ships in this
|
|
@@ -67,11 +72,6 @@ import '../skeleton/skeleton.class.js';
|
|
|
67
72
|
* this component's own plain one in the fallback path.
|
|
68
73
|
* @csspart code - The rendered `<code>`, same split as `pre` above.
|
|
69
74
|
*/
|
|
70
|
-
export interface LyraCodeBlockEventMap {
|
|
71
|
-
'lyra-copy': CustomEvent<{
|
|
72
|
-
text: string;
|
|
73
|
-
}>;
|
|
74
|
-
}
|
|
75
75
|
export declare class LyraCodeBlock extends LyraElement<LyraCodeBlockEventMap> {
|
|
76
76
|
static styles: import("lit").CSSResultGroup[];
|
|
77
77
|
/** The raw source text. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-block.class.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-block.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D,OAAO,EAOL,KAAK,kBAAkB,EACxB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,+BAA+B,CAAC;AA4BvC
|
|
1
|
+
{"version":3,"file":"code-block.class.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-block.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D,OAAO,EAOL,KAAK,kBAAkB,EACxB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,+BAA+B,CAAC;AA4BvC,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,qBAAa,aAAc,SAAQ,WAAW,CAAC,qBAAqB,CAAC;IACnE,MAAM,CAAC,MAAM,iCAAgC;IAE7C,2BAA2B;IACf,IAAI,SAAM;IAEtB;;;qCAGiC;IACrB,QAAQ,SAAM;IAE1B,oDAAoD;IACxC,QAAQ,SAAM;IAE1B,oEAAoE;IACxB,WAAW,UAAS;IAEhE;4CACwC;IACI,SAAS,UAAS;IAE9D,sDAAsD;IACV,QAAQ,UAAQ;IAE5D;wDACoD;IACb,SAAS,SAAM;IAEtD;;;;;;;;;;8DAU0D;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAE/E;;;;;;iDAM6C;IACa,aAAa,UAAS;IAMvE,OAAO,CAAC,eAAe,CAAuB;IAK9C,OAAO,CAAC,UAAU,CAAS;IAE3B,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,WAAW,CAAC,CAA0B;IAK9C,OAAO,CAAC,cAAc,CAAK;IAE3B,OAAO,CAAC,aAAa,CAAC,CAAgC;IAEtD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA6B;IAEpD,iBAAiB,IAAI,IAAI,CAQxB;IAED,oBAAoB,IAAI,IAAI,CAG3B;IAMD,OAAO,CAAC,kBAAkB;IAS1B,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAWlD;IAED,SAAS,CAAC,OAAO,IAAI,IAAI,CAOxB;IAED,OAAO,CAAC,aAAa;IA6CrB,OAAO,CAAC,QAAQ;IAoBhB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,IAAI,CAQV;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,YAAY;IA4CpB,MAAM,IAAI,cAAc,CA2BvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
|
|
@@ -37,6 +37,71 @@ const partTransformer = {
|
|
|
37
37
|
node.properties.part = ['code'];
|
|
38
38
|
},
|
|
39
39
|
};
|
|
40
|
+
/**
|
|
41
|
+
* `<lyra-code-block>` — fenced code display with optional lazy syntax
|
|
42
|
+
* highlighting and a copy button. No highlighting grammar ships in this
|
|
43
|
+
* component itself: it lazy-loads the optional peer dependency `shiki` (see
|
|
44
|
+
* `code-loader.ts`) for the actual tokenizing, and degrades to a plain
|
|
45
|
+
* `<pre><code>` when that peer isn't installed or `language` is unset/
|
|
46
|
+
* unrecognized — the exact same optional-peer shape `<lyra-markdown>` and
|
|
47
|
+
* `<lyra-chart>` already establish. That fallback is the *default* rendering
|
|
48
|
+
* path, not a degraded one: unhighlighted code is perfectly usable, and it's
|
|
49
|
+
* what every instance renders at zero extra bytes until shiki resolves.
|
|
50
|
+
*
|
|
51
|
+
* A `<lyra-skeleton>` placeholder stands in only while shiki itself is
|
|
52
|
+
* loading for the very first time on the page (cached — see
|
|
53
|
+
* `loadShikiHighlighter()`) and `language` is set. It's deliberately *not*
|
|
54
|
+
* shown again for a subsequent per-language grammar load (e.g. a second
|
|
55
|
+
* `<lyra-code-block>` requesting a language no earlier instance has used
|
|
56
|
+
* yet) — that grammar fetch is typically fast, and the plain-text fallback
|
|
57
|
+
* is already a perfectly readable placeholder for it, so a second
|
|
58
|
+
* loading-chrome state would add complexity for little practical benefit.
|
|
59
|
+
*
|
|
60
|
+
* `languages` is an additive, opt-in escape hatch from that default path for
|
|
61
|
+
* a consumer whose language set is fixed and known ahead of time: a map of
|
|
62
|
+
* language id to an already-imported shiki grammar module (e.g. `import bash
|
|
63
|
+
* from 'shiki/langs/bash.mjs'`). When `language` matches a key in `languages`,
|
|
64
|
+
* this component seeds a fine-grained `createHighlighterCore()` highlighter
|
|
65
|
+
* with *only* the pre-supplied grammars (see `code-loader.ts`'s
|
|
66
|
+
* `loadShikiHighlighterCore()`) instead of waiting on `loadShikiHighlighter()`
|
|
67
|
+
* and its dynamic per-language `loadLanguage()` import. The payoff isn't
|
|
68
|
+
* runtime cost — the default dynamic-import path is already well-optimized
|
|
69
|
+
* for that — it's *build output*: shiki's main entry point bundles a dynamic
|
|
70
|
+
* `import()` per bundled language (~200 of them) because a bundler can't
|
|
71
|
+
* statically narrow which of those a `loadLanguage(lang: string)` call might
|
|
72
|
+
* request at runtime, so it conservatively emits a build-output chunk for
|
|
73
|
+
* every one of them. `shiki/core`'s fine-grained API has no such table — a
|
|
74
|
+
* bundler only ever sees the exact grammar modules `languages` itself
|
|
75
|
+
* `import`s, so a consumer who pins its full language set this way trades a
|
|
76
|
+
* hand-maintained list for a build output scoped to just those languages
|
|
77
|
+
* instead of shiki's entire bundled set. A language requested but absent
|
|
78
|
+
* from `languages` still falls back to the ordinary dynamic-import path
|
|
79
|
+
* unchanged, so this is a partial opt-in, not a replacement for it.
|
|
80
|
+
*
|
|
81
|
+
* @customElement lyra-code-block
|
|
82
|
+
* @event lyra-copy - The copy button was activated. `detail: { text }` is
|
|
83
|
+
* always the raw `code` value (never the highlighted HTML), and always
|
|
84
|
+
* fires regardless of whether the actual OS clipboard write succeeded —
|
|
85
|
+
* same convention as `<lyra-json-viewer>`'s own copy button.
|
|
86
|
+
* @event lyra-toggle - The collapse/expand header button was activated.
|
|
87
|
+
* `detail: { collapsed }` — same event name and shape convention as
|
|
88
|
+
* `<lyra-thinking-panel>`'s own `lyra-toggle`.
|
|
89
|
+
* @csspart base - The outer container.
|
|
90
|
+
* @csspart header - The row above the code (filename/language/copy/toggle),
|
|
91
|
+
* present whenever there's anything to put in it.
|
|
92
|
+
* @csspart filename - The `filename` text, when set.
|
|
93
|
+
* @csspart language - The `language` badge, when set, so the language is
|
|
94
|
+
* exposed to assistive tech as visible text rather than only a `language`
|
|
95
|
+
* attribute a screen reader would never announce.
|
|
96
|
+
* @csspart copy-button - The copy-to-clipboard button, when `copyable`.
|
|
97
|
+
* @csspart toggle - The collapse/expand chevron button, when `collapsible`.
|
|
98
|
+
* @csspart body - The scrollable region wrapping the code (or the loading
|
|
99
|
+
* skeleton); respects `max-height`, `hidden` while `collapsible` and
|
|
100
|
+
* `collapsed`.
|
|
101
|
+
* @csspart pre - The rendered `<pre>` — shiki's own in the highlighted path,
|
|
102
|
+
* this component's own plain one in the fallback path.
|
|
103
|
+
* @csspart code - The rendered `<code>`, same split as `pre` above.
|
|
104
|
+
*/
|
|
40
105
|
export class LyraCodeBlock extends LyraElement {
|
|
41
106
|
constructor() {
|
|
42
107
|
super(...arguments);
|