@fusion.dev/helix 0.208.0 → 0.209.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/api.json +1 -1
- package/custom-elements.json +1 -1
- package/dist/element-events.generated.js +9 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/log/root/log-root.css.js +1 -1
- package/dist/terminal/index.d.ts +1 -0
- package/dist/terminal/index.js +1 -0
- package/dist/terminal/root/terminal-root.css.d.ts +1 -0
- package/dist/terminal/root/terminal-root.css.js +2 -0
- package/dist/terminal/root/terminal-root.d.ts +62 -0
- package/dist/terminal/root/terminal-root.js +28 -0
- package/examples.json +1 -1
- package/lint.json +1 -1
- package/package.json +6 -6
- package/skills/helix/SKILL.md +2 -2
- package/types/jsx.d.ts +902 -0
- package/types/svelte.d.ts +1 -0
- package/types/vue.d.ts +237 -0
- package/types/words.d.ts +112 -0
|
@@ -335,6 +335,15 @@ registerElementEvents({
|
|
|
335
335
|
'helix-tabs': ['helix-activate', 'helix-before-activate', 'helix-select'],
|
|
336
336
|
'helix-tag': ['helix-dismiss'],
|
|
337
337
|
'helix-tag-group': ['change', 'helix-before-change', 'helix-dismiss'],
|
|
338
|
+
'helix-terminal': [
|
|
339
|
+
'helix-copy',
|
|
340
|
+
'helix-terminal-bell',
|
|
341
|
+
'helix-terminal-input',
|
|
342
|
+
'helix-terminal-link',
|
|
343
|
+
'helix-terminal-resize',
|
|
344
|
+
'helix-terminal-restart',
|
|
345
|
+
'helix-terminal-title',
|
|
346
|
+
],
|
|
338
347
|
'helix-textarea': ['change', 'helix-before-change', 'helix-clear', 'input'],
|
|
339
348
|
'helix-time-input': [
|
|
340
349
|
'change',
|
package/dist/index.d.ts
CHANGED
|
@@ -105,6 +105,7 @@ export * from './switch/index.js';
|
|
|
105
105
|
export * from './table/index.js';
|
|
106
106
|
export * from './tabs/index.js';
|
|
107
107
|
export * from './tag/index.js';
|
|
108
|
+
export * from './terminal/index.js';
|
|
108
109
|
export * from './text/index.js';
|
|
109
110
|
export * from './textarea/index.js';
|
|
110
111
|
export * from './time-input/index.js';
|
package/dist/index.js
CHANGED
|
@@ -100,6 +100,7 @@ export * from './switch/index.js';
|
|
|
100
100
|
export * from './table/index.js';
|
|
101
101
|
export * from './tabs/index.js';
|
|
102
102
|
export * from './tag/index.js';
|
|
103
|
+
export * from './terminal/index.js';
|
|
103
104
|
export * from './text/index.js';
|
|
104
105
|
export * from './textarea/index.js';
|
|
105
106
|
export * from './time-input/index.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {--log-ansi-background: var(--log-background-color, var(--helix-color-background));--log-ansi-black: var(--helix-color-foreground);--log-ansi-blue: var(--helix-color-info);--log-ansi-bright-black: var(--helix-color-foreground-muted);--log-ansi-bright-blue: var(--helix-color-
|
|
2
|
+
export const styles = createSheet(`:host {--log-ansi-background: var(--log-background-color, var(--helix-color-background));--log-ansi-black: var(--helix-color-foreground);--log-ansi-blue: var(--helix-color-info);--log-ansi-bright-black: var(--helix-color-foreground-muted);--log-ansi-bright-blue: color-mix(in oklab, var(--log-ansi-blue) 75%, var(--helix-color-foreground));--log-ansi-bright-cyan: color-mix(in oklab, var(--log-ansi-cyan) 75%, var(--helix-color-foreground));--log-ansi-bright-green: color-mix(in oklab, var(--log-ansi-green) 75%, var(--helix-color-foreground));--log-ansi-bright-magenta: color-mix(in oklab, var(--log-ansi-magenta) 75%, var(--helix-color-foreground));--log-ansi-bright-red: color-mix(in oklab, var(--log-ansi-red) 75%, var(--helix-color-foreground));--log-ansi-bright-white: var(--helix-color-foreground);--log-ansi-bright-yellow: color-mix(in oklab, var(--log-ansi-yellow) 75%, var(--helix-color-foreground));--log-ansi-cyan: color-mix(in oklab, var(--helix-color-info), var(--helix-color-success));--log-ansi-foreground: var(--log-color, var(--helix-color-foreground));--log-ansi-green: var(--helix-color-success);--log-ansi-magenta: var(--helix-color-syntax-callable);--log-ansi-red: var(--helix-color-danger);--log-ansi-white: var(--helix-color-foreground-muted);--log-ansi-yellow: var(--helix-color-warning);background-color: var(--log-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));border-radius: var(--log-radius, var(--helix-radii-lg));color: var(--log-color, var(--helix-color-foreground));display: grid;font-family: var(--log-font-family, var(--helix-font-mono));font-size: var(--log-font-size, var(--helix-text-xs));grid-template-columns: minmax(0, 1fr);grid-template-rows: auto auto minmax(0, 1fr) auto;line-height: var(--log-line-height, var(--helix-leading-normal));max-block-size: var(--log-max-block-size, 30rem);min-block-size: 0;overflow: hidden;tab-size: 4}:host([separation="plain"]) {--log-padding-inline: var(--helix-space-none);--_log-duration-start: var(--helix-space-xs);background-color: transparent;border: none;border-radius: var(--helix-radii-none);max-block-size: var(--log-max-block-size, none)}:host([separation="plain"]) {color: var(--log-color, inherit)}:host([wrap]) {--_log-line-size: auto;--_log-white-space: pre-wrap}::slotted([slot="toolbar"]) {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);border-block-end: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));font-family: var(--helix-font-sans);grid-row: 1;padding-block: var(--helix-space-xs);padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part="dropped"] {background-color: var(--helix-color-surface-sunken);border-block-end: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);grid-row: 2;margin: var(--helix-space-none);padding-block: var(--helix-space-2xs);padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part="dropped"][hidden], [part="resume"][hidden] {display: none}[part="log"] {grid-row: 3;overflow: auto;overscroll-behavior: contain;padding-block: var(--helix-space-xs);scrollbar-color: var(--log-scrollbar-thumb-color, var(--helix-scrollbar-thumb-color)) var(--log-scrollbar-track-color, var(--helix-scrollbar-track-color));scrollbar-width: thin}:host([separation="plain"]) [part="log"] {padding-block: var(--helix-space-none)}[part="log"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="row"] {min-inline-size: 100%;inline-size: var(--_log-line-size, max-content)}[part="resume"] {display: grid;grid-row: 4;justify-items: center;margin-block-start: calc(var(--helix-space-xl) * -1 - var(--helix-space-xs));padding-block-end: var(--helix-space-xs);pointer-events: none;position: relative}[part="resume"] > * {pointer-events: auto}[part="resume"] slot::slotted(*) {border: var(--helix-border-floating) solid var(--log-border-color, var(--helix-color-border));box-shadow: var(--helix-shadow-floating)}[part="resume-button"] {all: unset;box-sizing: border-box;align-items: center;background-color: var(--helix-color-surface-raised);block-size: var(--helix-size-control-sm);border: var(--helix-border-floating) solid var(--log-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);color: var(--helix-color-foreground);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs);line-height: var(--helix-leading-tight);padding-inline: var(--helix-space-sm);white-space: nowrap}[part="resume-button"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 6%, var(--helix-color-surface-raised))}[part="resume-button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="resume-mark"] {block-size: var(--helix-size-icon-sm);display: inline-flex;inline-size: var(--helix-size-icon-sm)}[part="resume-mark"] svg {block-size: 100%;inline-size: 100%}[part="empty"], [part="loading"] {--_collection-inset-block: var(--helix-space-lg);--_collection-inset-inline: var(--helix-space-md)}@media print {:host {max-block-size: none}[part="log"] {overflow: visible}[part="resume"] {display: none}}`);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { HelixTerminal } from './root/terminal-root.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { HelixTerminal } from './root/terminal-root.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("lit").CSSResult;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
+
export const styles = createSheet(`:host {--terminal-active-match-background-color: color-mix(in oklab, var(--helix-color-warning) 45%, var(--terminal-background-color));--terminal-active-match-border-color: var(--helix-color-warning);--terminal-ansi-black: light-dark(var(--helix-color-foreground), var(--helix-color-border));--terminal-ansi-blue: var(--helix-color-info);--terminal-ansi-bright-black: var(--helix-color-foreground-muted);--terminal-ansi-bright-blue: color-mix(in oklab, var(--terminal-ansi-blue) 75%, var(--helix-color-foreground));--terminal-ansi-bright-cyan: color-mix(in oklab, var(--terminal-ansi-cyan) 75%, var(--helix-color-foreground));--terminal-ansi-bright-green: color-mix(in oklab, var(--terminal-ansi-green) 75%, var(--helix-color-foreground));--terminal-ansi-bright-magenta: color-mix(in oklab, var(--terminal-ansi-magenta) 75%, var(--helix-color-foreground));--terminal-ansi-bright-red: color-mix(in oklab, var(--terminal-ansi-red) 75%, var(--helix-color-foreground));--terminal-ansi-bright-white: light-dark(var(--helix-color-border), var(--helix-color-foreground));--terminal-ansi-bright-yellow: color-mix(in oklab, var(--terminal-ansi-yellow) 75%, var(--helix-color-foreground));--terminal-ansi-cyan: color-mix(in oklab, var(--helix-color-info), var(--helix-color-success));--terminal-ansi-green: var(--helix-color-success);--terminal-ansi-magenta: var(--helix-color-syntax-callable);--terminal-ansi-red: var(--helix-color-danger);--terminal-ansi-white: light-dark(var(--helix-color-foreground-subtle), color-mix(in oklab, var(--helix-color-foreground-muted), var(--helix-color-foreground)));--terminal-ansi-yellow: var(--helix-color-warning);--terminal-background-color: var(--helix-color-background);--terminal-color: var(--helix-color-foreground);--terminal-cursor-color: var(--helix-color-primary);--terminal-match-background-color: color-mix(in oklab, var(--helix-color-warning) 22%, var(--terminal-background-color));--terminal-scrollbar-thumb-color: var(--helix-scrollbar-thumb-color);--terminal-selection-background-color: color-mix(in oklab, var(--helix-color-primary) 30%, transparent);display: block}:host([fill]) {inset: 0;position: absolute}[part="region"] {background-color: var(--terminal-background-color);block-size: var(--terminal-block-size, 24rem);border: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));border-radius: var(--terminal-radius, var(--helix-radii-lg));box-sizing: border-box;display: grid;grid-template-rows: [header] auto [find] auto [viewport] minmax(0, 1fr) [status] auto;overflow: hidden;position: relative}:host([fill]) [part="region"], :host(:state(fullscreen)) [part="region"] {block-size: 100%}:host([separation="plain"]) [part="region"], :host(:state(fullscreen)) [part="region"] {border: none;border-radius: 0}:host(:fullscreen) {display: block}[part="header"], [part="find-bar"], [part="status"] {--helix-size-checkbox: var(--helix-size-checkbox-sm);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-tag: var(--helix-size-tag-sm);align-items: center;background-color: var(--terminal-header-background-color, var(--helix-color-surface-raised));box-sizing: border-box;display: flex;gap: var(--helix-space-2xs);min-inline-size: 0;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-sm) var(--helix-space-2xs)}[part="header"] {grid-row: header;border-block-end: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));min-block-size: calc(var(--helix-size-control) + var(--helix-space-2xs) * 2)}[part="header"][hidden], [part="find-bar"][hidden], [part="status"][hidden] {display: none}[part="label"] {color: var(--helix-color-foreground);display: block;flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}[part="actions"], [part="find-actions"] {display: contents}[part="controls"], [part="find-controls"] {flex: 0 0 auto}[part="exit-actions"] {align-items: center;display: flex;flex: 0 0 auto;gap: var(--helix-space-2xs)}:host(:state(find-open)) [part="find"], :host(:state(fullscreen)) [part="fullscreen"] {--icon-button-background-color: color-mix(in oklab, var(--helix-color-foreground) 12%, transparent);--icon-button-foreground-color: var(--helix-color-foreground)}[part="find-field"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="find-bar"], [part="find-controls"] {--helix-size-control: calc(var(--helix-size-control-sm) * 0.8);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8)}[part="find-bar"] {grid-row: find;border-block-end: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border))}[part="find-field"] {appearance: none;background-color: var(--terminal-background-color);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));inline-size: 100%;max-inline-size: 20rem;min-inline-size: 0;padding-inline: var(--helix-space-xs)}[part="find-field"]::-webkit-search-cancel-button, [part="find-field"]::-webkit-search-decoration {appearance: none}[part="find-field"]::placeholder {color: var(--helix-color-foreground-muted)}[part="find-count"] {color: var(--helix-color-foreground-muted);flex: 1 0 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;min-inline-size: 7em;padding-inline: var(--helix-space-xs);white-space: nowrap}[part="viewport"] {grid-row: viewport;color: var(--terminal-color);font-family: var(--terminal-font-family, var(--helix-font-mono));font-size: var(--terminal-font-size, var(--helix-text-sm));min-block-size: 0;overflow: auto;padding: var(--terminal-padding, var(--helix-space-xs) var(--helix-space-sm));position: relative}[part="viewport"] ::slotted(*) {block-size: 100%;inline-size: 100%}[part="viewport"]::after {background-color: var(--helix-color-foreground);content: "";inset: 0;opacity: 0;pointer-events: none;position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard)}:host(:state(bell)) [part="viewport"]::after {opacity: 0.08;transition: none}[part="status"] {grid-row: status;border-block-start: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));color: var(--helix-color-foreground-muted);flex-wrap: wrap;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);gap: var(--helix-space-xs) var(--helix-space-sm);padding-inline: var(--helix-space-sm)}[part="status"] > span {flex: 1 1 16rem;min-inline-size: 0}[part="restart"] {--button-border-color: var(--terminal-border-color, var(--helix-color-border))}@media (prefers-reduced-motion: reduce) {[part="viewport"]::after {transition: none}}@media print {[part="controls"], [part="find-bar"], [part="restart"], [part="exit-actions"] {display: none}}`);
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { HelixHeadlessTerminal } from '@fusion.dev/helix-headless/terminal';
|
|
2
|
+
import type { CSSResultGroup } from 'lit';
|
|
3
|
+
import '../../button/index.js';
|
|
4
|
+
import '../../icon-button/index.js';
|
|
5
|
+
import '../../toolbar/index.js';
|
|
6
|
+
/**
|
|
7
|
+
* @summary A frame around a terminal emulator that runs a shell you connect.
|
|
8
|
+
*
|
|
9
|
+
* @description
|
|
10
|
+
* The styled frame: a bordered box on the page's background with a header
|
|
11
|
+
* strip for the name and the controls, and a status line that appears when
|
|
12
|
+
* the process exits. It is 24rem tall unless `fill` is set or
|
|
13
|
+
* `--terminal-block-size` says otherwise.
|
|
14
|
+
*
|
|
15
|
+
* `connectTerminal` themes the terminal from your tokens. The sixteen ANSI
|
|
16
|
+
* colors share Log's hues, red the danger color, green success, yellow
|
|
17
|
+
* warning, and blue info, and the four grays keep their order from dark to
|
|
18
|
+
* light in each color mode. Set `--terminal-ansi-red` and its siblings,
|
|
19
|
+
* `--terminal-cursor-color`, or `--terminal-selection-background-color` on
|
|
20
|
+
* the terminal to choose them yourself, such as
|
|
21
|
+
* `helix-terminal { --terminal-ansi-blue: #3b82f6 }`. The
|
|
22
|
+
* [Terminals](https://fusion.dev/helix/docs/terminals) guide lists them all.
|
|
23
|
+
*
|
|
24
|
+
* Set `fill` for a terminal that fills a pane, such as one side of a
|
|
25
|
+
* `Splitter`: the frame covers its container, which needs a position of its
|
|
26
|
+
* own, such as `position: relative`. Set `separation="plain"` where the pane
|
|
27
|
+
* already draws the edge.
|
|
28
|
+
*
|
|
29
|
+
* @since 0.209.0
|
|
30
|
+
* @status experimental
|
|
31
|
+
* @category media
|
|
32
|
+
* @aliases Terminal emulator, Shell, xterm
|
|
33
|
+
* @documentation https://fusion.dev/helix/components/terminal
|
|
34
|
+
*
|
|
35
|
+
* @cssproperty --terminal-block-size - The frame's height, as a length. Ignored with `fill`, where the container decides it.
|
|
36
|
+
* @cssproperty --terminal-border-color - The edge around the frame and the rules inside it.
|
|
37
|
+
* @cssproperty --terminal-font-family - The face of the grid. Defaults to the monospaced face.
|
|
38
|
+
* @cssproperty --terminal-font-size - The size of the grid's text. Defaults to the small text step.
|
|
39
|
+
* @cssproperty --terminal-header-background-color - The fill of the header, the find bar, and the status line.
|
|
40
|
+
* @cssproperty --terminal-padding - The space between the frame's edge and the grid.
|
|
41
|
+
* @cssproperty --terminal-radius - The frame's corners.
|
|
42
|
+
*/
|
|
43
|
+
export declare class HelixTerminal extends HelixHeadlessTerminal {
|
|
44
|
+
static tier: string;
|
|
45
|
+
/**
|
|
46
|
+
* Covers the container instead of taking a height of its own, for a
|
|
47
|
+
* terminal that fills a pane. The container needs a position, such as
|
|
48
|
+
* `position: relative`.
|
|
49
|
+
*/
|
|
50
|
+
fill: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* How the frame stands off the page. Unset, it is outlined. `plain` draws
|
|
53
|
+
* no edge or corners, for a pane that draws its own.
|
|
54
|
+
*/
|
|
55
|
+
separation?: 'outlined' | 'plain';
|
|
56
|
+
static styles: CSSResultGroup;
|
|
57
|
+
}
|
|
58
|
+
declare global {
|
|
59
|
+
interface HTMLElementTagNameMap {
|
|
60
|
+
'helix-terminal': HelixTerminal;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { customElement } from '@fusion.dev/helix-core';
|
|
3
|
+
import { HelixHeadlessTerminal } from '@fusion.dev/helix-headless/terminal';
|
|
4
|
+
import { property } from 'lit/decorators.js';
|
|
5
|
+
import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
|
|
6
|
+
import { styles as liveStyles } from '../../shared/live/live.css.js';
|
|
7
|
+
import { styles } from './terminal-root.css.js';
|
|
8
|
+
import '../../button/index.js';
|
|
9
|
+
import '../../icon-button/index.js';
|
|
10
|
+
import '../../toolbar/index.js';
|
|
11
|
+
let HelixTerminal = class HelixTerminal extends HelixHeadlessTerminal {
|
|
12
|
+
constructor() {
|
|
13
|
+
super(...arguments);
|
|
14
|
+
this.fill = false;
|
|
15
|
+
}
|
|
16
|
+
static { this.tier = 'helix-'; }
|
|
17
|
+
static { this.styles = [liveStyles, glyphStyles, styles]; }
|
|
18
|
+
};
|
|
19
|
+
__decorate([
|
|
20
|
+
property({ reflect: true, type: Boolean })
|
|
21
|
+
], HelixTerminal.prototype, "fill", void 0);
|
|
22
|
+
__decorate([
|
|
23
|
+
property({ reflect: true })
|
|
24
|
+
], HelixTerminal.prototype, "separation", void 0);
|
|
25
|
+
HelixTerminal = __decorate([
|
|
26
|
+
customElement('helix-terminal')
|
|
27
|
+
], HelixTerminal);
|
|
28
|
+
export { HelixTerminal };
|