@fusion.dev/helix 0.220.0 → 0.221.0

package/dist/code-editor/root/code-editor-root.d.ts

@@ -12,7 +12,7 @@ import '../../toolbar/index.js';
  * header, a find bar and a status line each a strip on the raised surface,
  * one frame around them. It is 24rem tall unless `fill` is set or
  * `--code-editor-block-size` says otherwise. An engine draws inside it:
- * `@fusion.dev/helix-editor` themes CodeMirror's gutter, caret, selection and
+ * `@fusion.dev/helix-code-editor` themes CodeMirror's gutter, caret, selection and
  * syntax from your tokens, and draws a problem's line number in its tone.
  *
  * Set `fill` for an editor that fills a pane, such as one side of a split
@@ -20,7 +20,7 @@ import '../../toolbar/index.js';
  *
  * @since 0.216.0
  * @status experimental
- * @category inputs
+ * @category editors
  * @aliases Code editor, CodeMirror, File editor, IDE, Monaco
  * @documentation https://fusion.dev/helix/components/code-editor
  *

package/dist/editor/index.d.ts

@@ -0,0 +1 @@
+export * from './root/editor-root.js';

package/dist/editor/index.js

@@ -0,0 +1 @@
+export * from './root/editor-root.js';

package/dist/editor/root/editor-root.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/editor/root/editor-root.css.js

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {display: flex;flex-direction: column}:host([fill]) {inset: 0;position: absolute}[part="region"] {background-color: var(--editor-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--editor-border-color, var(--helix-color-border));border-radius: var(--editor-radius, var(--helix-radii-lg));box-sizing: border-box;display: flex;flex: 1 1 auto;flex-direction: column;min-block-size: var(--editor-min-block-size, 12rem);overflow: clip;transition: border-color var(--helix-duration-fast) var(--helix-easing-standard)}:host([fill]) [part="region"] {block-size: 100%;min-block-size: 0}:host([separation="plain"]) [part="region"] {border: none;border-radius: 0}:host(:state(document-focused):not([separation="plain"])) [part="region"] {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0}[part="header"] {--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);background-color: var(--editor-header-background-color, var(--helix-color-surface-raised));border-block-end: var(--helix-border-thin) solid var(--editor-border-color, var(--helix-color-border));box-sizing: border-box;container-type: inline-size;display: flex;flex: 0 0 auto;flex-direction: column;gap: var(--helix-space-2xs);inset-block-start: var(--editor-header-offset, 0);padding: var(--helix-space-2xs) var(--helix-space-xs);position: sticky;z-index: 1}[part="header"][hidden] {display: none}[part="controls"] {--toolbar-separator-gap: var(--helix-space-2xs);display: flex}[part="controls"]::part(toolbar) {flex: 1 1 auto;flex-wrap: wrap;row-gap: var(--helix-space-2xs)}[part="tools"] {display: flex;gap: var(--helix-space-2xs)}[part="divider"] {align-self: center;block-size: calc(var(--helix-size-control) * 0.6)}@container (inline-size < 40rem) {[part="controls"] {--toolbar-gap: var(--helix-space-sm)}[part="divider"] {display: none}}[aria-pressed="true"], :host(:state(find-open)) [part="find-toggle"] {--icon-button-background-color: color-mix(in oklab, var(--helix-color-foreground) 12%, transparent);--icon-button-foreground-color: var(--helix-color-foreground)}[part="block-name"] {display: inline-grid;justify-items: start}[part="block-name"] > span {grid-area: 1 / 1}[part="block-name"] > [hidden] {display: block;visibility: hidden}[part="actions"] {display: flex;gap: var(--helix-space-2xs);margin-inline-start: auto}[part="actions"][hidden] {display: none}[part="link-bar"] {--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);align-items: center;display: flex;gap: var(--helix-space-2xs);min-inline-size: 0;padding-inline-start: var(--helix-space-2xs)}[part="link-bar"][hidden] {display: none}[part="link-field"] {appearance: none;background-color: var(--editor-background-color, var(--helix-color-background));block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--editor-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 12rem;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));max-inline-size: 28rem;min-inline-size: 0;padding-inline: var(--helix-space-xs)}[part="link-field"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="link-controls"] {flex: 0 0 auto}[part="find"] {--find-background-color: transparent;--find-border-color: var(--editor-border-color, var(--helix-color-border));--find-field-background-color: var(--editor-background-color, var(--helix-color-background))}[part="find"]:not(:state(open)) {display: none}[part="find"]::part(bar) {border-block-end: none;padding-block: 0;padding-inline: var(--helix-space-2xs) 0}[part="viewport"] {color: var(--helix-color-foreground);display: flex;flex: 1 1 auto;flex-direction: column;min-block-size: 0}:host([fill]) [part="viewport"] {overflow: auto}[part="viewport"] ::slotted(*) {box-sizing: border-box;caret-color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-md);line-height: var(--helix-leading-normal);outline: none;padding-block: var(--editor-padding, var(--helix-space-lg));padding-inline: max(var(--editor-padding, var(--helix-space-lg)), calc((100% - var(--editor-measure, 72ch)) / 2))}[part="footer"] {color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs)}@media print {[part="header"] {display: none}[part="region"], :host([fill]) [part="viewport"] {overflow: visible}}`);

package/dist/editor/root/editor-root.d.ts

@@ -0,0 +1,62 @@
+import { HelixHeadlessEditor } from '@fusion.dev/helix-headless/editor';
+import type { CSSResultGroup } from 'lit';
+import '../../button/index.js';
+import '../../divider/index.js';
+import '../../find/index.js';
+import '../../icon-button/index.js';
+import '../../menu/index.js';
+import '../../toolbar/index.js';
+/**
+ * @summary A frame around a document that ProseMirror or another editor draws.
+ *
+ * @description
+ * Drawn as Code Editor is: the document on the page's ground, and the toolbar
+ * a strip on the raised surface, one frame around them. The strip stays at the
+ * top of the page while a long document scrolls under it, and the frame grows
+ * with the document from `--editor-min-block-size`. Set `fill` for an editor
+ * that fills a pane, where the document scrolls inside the frame.
+ *
+ * The document's headings, lists, quotes, code, and tables are drawn by the
+ * base layer's `data-prose` rules, so it reads as your docs and chat replies
+ * do. Write `data-prose` on the document so the base layer draws it before a
+ * renderer connects, and `connectEditor` writes it too. Its lines keep to a
+ * readable length, `--editor-measure`, centered in a wide frame.
+ *
+ * @since 0.221.0
+ * @status experimental
+ * @category editors
+ * @aliases Rich text editor, WYSIWYG, Document editor, ProseMirror, Block editor
+ * @documentation https://fusion.dev/helix/components/editor
+ *
+ * @cssproperty --editor-background-color - The ground the document is drawn on. Defaults to the page's background.
+ * @cssproperty --editor-border-color - The frame's edge and the line under the toolbar.
+ * @cssproperty --editor-header-background-color - The fill of the toolbar's strip.
+ * @cssproperty --editor-header-offset - How far below the top of the page the toolbar stays while the document scrolls, such as the height of your own fixed header. `0` unless set.
+ * @cssproperty --editor-measure - The longest a line of the document runs, as a length: `72ch` unless set.
+ * @cssproperty --editor-min-block-size - The frame's least height, which it grows from with the document: `12rem` unless set. Ignored with `fill`.
+ * @cssproperty --editor-padding - The space around the document, inside the frame.
+ * @cssproperty --editor-radius - The frame's corner radius.
+ */
+export declare class HelixEditor extends HelixHeadlessEditor {
+    static tier: string;
+    /**
+     * Covers the container instead of growing with the document, for an editor
+     * that fills a pane, such as one side of a split view. The document scrolls
+     * inside the frame. The container needs a position, such as
+     * `position: relative`.
+     */
+    fill: boolean;
+    /**
+     * How the frame stands off the page. Unset, it is outlined. `plain` draws
+     * no edge or corners, for a document that fills a page or a pane of its own.
+     */
+    separation?: 'outlined' | 'plain';
+    /** The block menu's button is drawn as the tools beside it are. */
+    protected get blockEmphasis(): 'ghost' | undefined;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-editor': HelixEditor;
+    }
+}

package/dist/editor/root/editor-root.js

@@ -0,0 +1,33 @@
+import { __decorate } from "tslib";
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessEditor } from '@fusion.dev/helix-headless/editor';
+import { property } from 'lit/decorators.js';
+import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
+import { styles } from './editor-root.css.js';
+import '../../button/index.js';
+import '../../divider/index.js';
+import '../../find/index.js';
+import '../../icon-button/index.js';
+import '../../menu/index.js';
+import '../../toolbar/index.js';
+let HelixEditor = class HelixEditor extends HelixHeadlessEditor {
+    constructor() {
+        super(...arguments);
+        this.fill = false;
+    }
+    static { this.tier = 'helix-'; }
+    get blockEmphasis() {
+        return 'ghost';
+    }
+    static { this.styles = [glyphStyles, styles]; }
+};
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixEditor.prototype, "fill", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixEditor.prototype, "separation", void 0);
+HelixEditor = __decorate([
+    customElement('helix-editor')
+], HelixEditor);
+export { HelixEditor };

package/dist/element-events.generated.js

@@ -134,6 +134,7 @@ registerElementEvents({
     'helix-drawer': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],
     'helix-drilldown': ['helix-navigate', 'helix-select'],
     'helix-drilldown-item': ['helix-select'],
+    'helix-editor': ['helix-found'],
     'helix-file-input': ['change', 'helix-before-change', 'helix-reject', 'input'],
     'helix-filter-chip': ['helix-dismiss'],
     'helix-filter-input': [

package/dist/index.d.ts

@@ -43,6 +43,7 @@ export * from './divider/index.js';
 export * from './donut-chart/index.js';
 export * from './drawer/index.js';
 export * from './drilldown/index.js';
+export * from './editor/index.js';
 export * from './empty/index.js';
 export * from './file-input/index.js';
 export * from './filter-input/index.js';

package/dist/index.js

@@ -38,6 +38,7 @@ export * from './divider/index.js';
 export * from './donut-chart/index.js';
 export * from './drawer/index.js';
 export * from './drilldown/index.js';
+export * from './editor/index.js';
 export * from './empty/index.js';
 export * from './file-input/index.js';
 export * from './filter-input/index.js';