@fusion.dev/helix 0.103.3 → 0.104.1

package/dist/announcement/root/announcement-root.js

@@ -7,9 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessAnnouncement } from '@fusion.dev/helix-headless/announcement';
 import { property } from 'lit/decorators.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './announcement-root.css.js';
 let HelixAnnouncement = class HelixAnnouncement extends HelixHeadlessAnnouncement {
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
 };
 __decorate([
     property({ reflect: true })

package/dist/canvas/edge/canvas-edge.d.ts

@@ -0,0 +1,24 @@
+import { HelixHeadlessCanvasEdge } from '@fusion.dev/helix-headless/canvas';
+import { type CSSResultGroup } from 'lit';
+/**
+ * @summary A connector between two cards on a canvas.
+ *
+ * @description
+ * Draws nothing and takes no room: the board draws every connector into one
+ * layer under the cards, which is the only place a line between two of them can
+ * be drawn. What this element carries is which cards and which sides.
+ *
+ * @since 0.100.0
+ * @status experimental
+ * @category media
+ * @aliases CanvasConnector, BoardEdge
+ * @documentation https://fusion.dev/helix/components/canvas
+ */
+export declare class HelixCanvasEdge extends HelixHeadlessCanvasEdge {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-canvas-edge': HelixCanvasEdge;
+    }
+}

package/dist/canvas/edge/canvas-edge.js

@@ -0,0 +1,20 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessCanvasEdge } from '@fusion.dev/helix-headless/canvas';
+import { css } from 'lit';
+let HelixCanvasEdge = class HelixCanvasEdge extends HelixHeadlessCanvasEdge {
+    static { this.styles = css `
+    :host {
+      display: none;
+    }
+  `; }
+};
+HelixCanvasEdge = __decorate([
+    customElement('helix-canvas-edge')
+], HelixCanvasEdge);
+export { HelixCanvasEdge };

package/dist/canvas/index.d.ts

@@ -0,0 +1,5 @@
+export type { CanvasDocument, CanvasEdge, CanvasEdgeProps, CanvasEnd, CanvasNode, CanvasNodeProps, CanvasPath, CanvasSide, CanvasTone, } from '@fusion.dev/helix-headless/canvas';
+export { fromJsonCanvas } from '@fusion.dev/helix-headless/canvas';
+export { HelixCanvasEdge } from './edge/canvas-edge.js';
+export { HelixCanvasNode } from './node/canvas-node.js';
+export { HelixCanvas } from './root/canvas-root.js';

package/dist/canvas/index.js

@@ -0,0 +1,4 @@
+export { fromJsonCanvas } from '@fusion.dev/helix-headless/canvas';
+export { HelixCanvasEdge } from './edge/canvas-edge.js';
+export { HelixCanvasNode } from './node/canvas-node.js';
+export { HelixCanvas } from './root/canvas-root.js';

package/dist/canvas/node/canvas-node.css.d.ts

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

package/dist/canvas/node/canvas-node.css.js

@@ -0,0 +1,360 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+--_canvas-card-x: 0px;
+--_canvas-card-y: 0px;
+--_canvas-card-inline-size: auto;
+--_canvas-card-block-size: auto;
+
+--_canvas-card-tone: var(--helix-color-border);
+--_canvas-card-color: var(--canvas-node-color, var(--_canvas-card-tone));
+
+--_canvas-handle-color: var(--_canvas-card-color);
+
+background-color: var(--canvas-node-background-color, var(--helix-color-surface));
+block-size: var(--_canvas-card-block-size);
+box-shadow: var(--canvas-node-shadow, none);
+border: var(--helix-border-thin) solid var(--_canvas-card-color);
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+color: var(--helix-color-foreground);
+display: block;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+inline-size: var(--_canvas-card-inline-size);
+inset-block-start: var(--_canvas-card-y);
+inset-inline-start: var(--_canvas-card-x);
+
+overflow: visible;
+position: absolute;
+z-index: 1;
+}
+
+:host([group]) {
+background-color: color-mix(in oklab, var(--helix-color-foreground) 4%, transparent);
+border-style: dashed;
+
+overflow: visible;
+z-index: 0;
+}
+
+:host([tone="accent"]) {
+--_canvas-card-tone: var(--helix-color-accent);
+}
+:host([tone="danger"]) {
+--_canvas-card-tone: var(--helix-color-danger);
+}
+:host([tone="info"]) {
+--_canvas-card-tone: var(--helix-color-info);
+}
+:host([tone="primary"]) {
+--_canvas-card-tone: var(--helix-color-primary);
+}
+:host([tone="success"]) {
+--_canvas-card-tone: var(--helix-color-success);
+}
+:host([tone="warning"]) {
+--_canvas-card-tone: var(--helix-color-warning);
+}
+
+:host(:not([tone])),
+:host([tone="neutral"]) {
+--_canvas-handle-color: var(--canvas-node-color, var(--helix-color-foreground-muted));
+}
+
+:host(:state(selected)),
+:host(:state(target)) {
+--_canvas-handle-color: var(--helix-color-accent);
+}
+
+:host([separation="filled"]:not([group])) {
+background-color: color-mix(in oklab, var(--_canvas-card-color) 16%, var(--helix-color-surface));
+border-color: transparent;
+}
+
+:host([separation="elevated"]:not([group])) {
+--canvas-node-shadow: var(--helix-shadow-md);
+}
+
+:host([separation="plain"]:not([group])) {
+background-color: transparent;
+border-color: transparent;
+}
+
+:host([material="glass"]:not([group])) {
+backdrop-filter: var(--helix-material-backdrop);
+background-color: var(--helix-material-translucent);
+}
+
+:host([material="frosted"]:not([group])) {
+backdrop-filter: blur(var(--helix-material-blur-lg));
+background-color: var(--helix-material-translucent-strong);
+}
+
+:host([material="transparent"]:not([group])) {
+backdrop-filter: none;
+background-color: transparent;
+}
+
+[part="node"] {
+block-size: 100%;
+border-radius: inherit;
+box-sizing: border-box;
+display: flex;
+flex-direction: column;
+gap: var(--helix-space-2xs);
+justify-content: center;
+overflow: hidden;
+padding: var(--canvas-node-padding, var(--helix-space-sm));
+}
+
+[part="node"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
+:host([group]) [part="node"]::before {
+color: var(--helix-color-foreground-muted);
+content: attr(aria-label);
+font-size: var(--helix-text-xs);
+inset-block-end: 100%;
+inset-inline-start: 0;
+padding-block-end: var(--helix-space-2xs);
+position: absolute;
+}
+
+:host([group]) [part="node"] {
+display: block;
+overflow: visible;
+position: relative;
+}
+
+[part~="handle"] {
+background-color: var(--helix-color-surface);
+block-size: var(--canvas-handle-size, 0.625rem);
+border: var(--helix-border-thick) solid var(--_canvas-handle-color);
+border-radius: var(--helix-radii-full);
+box-sizing: border-box;
+cursor: crosshair;
+inline-size: var(--canvas-handle-size, 0.625rem);
+opacity: 0;
+position: absolute;
+transform: translate(-50%, -50%);
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part~="handle"]::after {
+content: "";
+inset: calc(var(--helix-space-sm) * -1);
+position: absolute;
+}
+
+:host(:hover) [part~="handle"],
+:host(:focus-within) [part~="handle"],
+:host(:state(candidate)) [part~="handle"] {
+opacity: 1;
+}
+
+:host(:state(selected)) {
+outline: var(--helix-border-thick) solid var(--helix-color-accent);
+outline-offset: calc(var(--helix-border-thin) * -1);
+}
+
+:host(:state(target)) {
+box-shadow: 0 0 0 var(--helix-border-thick) var(--helix-color-accent);
+}
+
+:host(:state(target)) [part~="handle"] {
+background-color: var(--_canvas-handle-color);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part~="handle"],
+[part~="move"] {
+transition: none;
+}
+}
+
+[part~="handle-top"] {
+left: 50%;
+top: 0;
+}
+[part~="handle-right"] {
+left: 100%;
+top: 50%;
+}
+[part~="handle-bottom"] {
+left: 50%;
+top: 100%;
+}
+[part~="handle-left"] {
+left: 0;
+top: 50%;
+}
+
+::slotted([slot="description"]) {
+color: var(--helix-color-foreground-subtle);
+font-size: var(--helix-text-xs);
+}
+
+:host(:not([style*="--_canvas-card-x"])) {
+position: static;
+}
+
+[part~="grip"] {
+background-color: var(--helix-color-surface);
+block-size: var(--canvas-grip-size, 0.5rem);
+border: var(--helix-border-thin) solid var(--helix-color-accent);
+box-sizing: border-box;
+inline-size: var(--canvas-grip-size, 0.5rem);
+position: absolute;
+transform: translate(-50%, -50%);
+}
+
+[part~="grip"]::after {
+content: "";
+inset: calc(var(--helix-space-2xs) * -1);
+position: absolute;
+}
+
+[part~="grip-top-left"] {
+cursor: nwse-resize;
+left: 0;
+top: 0;
+}
+[part~="grip-top-right"] {
+cursor: nesw-resize;
+left: 100%;
+top: 0;
+}
+[part~="grip-bottom-right"] {
+cursor: nwse-resize;
+left: 100%;
+top: 100%;
+}
+[part~="grip-bottom-left"] {
+cursor: nesw-resize;
+left: 0;
+top: 100%;
+}
+
+[part~="move"] {
+background-image: radial-gradient(circle, currentColor 1px, transparent 1.25px);
+background-size: 50% calc(100% / 3);
+block-size: var(--canvas-move-block-size, 0.75rem);
+color: var(--helix-color-foreground-subtle);
+cursor: move;
+inline-size: var(--canvas-move-inline-size, 0.5rem);
+inset-block-start: var(--canvas-move-inset, var(--helix-space-xs));
+inset-inline-start: var(--canvas-move-inset, var(--helix-space-xs));
+opacity: 0;
+position: absolute;
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part~="move"]::after {
+content: "";
+inset: calc((1.5rem - 100%) / -2);
+position: absolute;
+}
+
+:host(:hover) [part~="move"],
+:host(:focus-within) [part~="move"] {
+opacity: 1;
+}
+
+[part~="move"]:hover {
+color: var(--helix-color-accent);
+}
+
+:host([shape="pill"]) [part~="move"],
+:host([shape="circle"]) [part~="move"],
+:host([shape="diamond"]) [part~="move"] {
+inset-block-start: calc(var(--canvas-move-inset, var(--helix-space-xs)) * 2);
+inset-inline: 0;
+margin-inline: auto;
+}
+
+:host([shape="square"]:not([group])) {
+border-radius: 0;
+}
+
+:host([shape="pill"]:not([group])) {
+border-radius: var(--helix-radii-full);
+}
+
+:host([shape="circle"]:not([group])) {
+border-radius: 50%;
+}
+
+:host([shape="pill"]:not([group])) [part="node"],
+:host([shape="circle"]:not([group])) [part="node"] {
+align-items: center;
+padding-inline: 15%;
+text-align: center;
+}
+
+:host([shape="diamond"]:not([group])) {
+
+backdrop-filter: none;
+background-color: transparent;
+border-color: transparent;
+--canvas-node-shadow: none;
+}
+
+[part="outline"] {
+block-size: calc(100% + var(--helix-border-thin) * 2);
+inline-size: calc(100% + var(--helix-border-thin) * 2);
+left: calc(var(--helix-border-thin) * -1);
+overflow: visible;
+pointer-events: none;
+position: absolute;
+top: calc(var(--helix-border-thin) * -1);
+}
+
+[part="outline"] polygon {
+fill: var(--canvas-node-background-color, var(--helix-color-surface));
+stroke: var(--_canvas-card-color);
+stroke-width: var(--helix-border-thin);
+}
+
+:host([shape="diamond"][material="glass"]) [part="outline"] polygon {
+fill: var(--helix-material-translucent);
+}
+
+:host([shape="diamond"][material="frosted"]) [part="outline"] polygon {
+fill: var(--helix-material-translucent-strong);
+}
+
+:host([shape="diamond"][material="transparent"]) [part="outline"] polygon {
+fill: transparent;
+}
+
+:host([shape="diamond"][separation="filled"]) [part="outline"] polygon {
+fill: color-mix(in oklab, var(--_canvas-card-color) 16%, var(--helix-color-surface));
+stroke: transparent;
+}
+
+:host([shape="diamond"][separation="plain"]) [part="outline"] polygon {
+fill: transparent;
+stroke: transparent;
+}
+
+:host([shape="diamond"]:state(selected)),
+:host([shape="diamond"]:state(target)) {
+box-shadow: none;
+outline: none;
+}
+
+:host([shape="diamond"]:state(selected)) [part="outline"] polygon,
+:host([shape="diamond"]:state(target)) [part="outline"] polygon {
+stroke: var(--helix-color-accent);
+stroke-width: var(--helix-border-thick);
+}
+
+:host([shape="diamond"]:not([group])) [part="node"] {
+align-items: center;
+padding-inline: 22%;
+position: relative;
+text-align: center;
+}`);

package/dist/canvas/node/canvas-node.d.ts

@@ -0,0 +1,53 @@
+import { HelixHeadlessCanvasNode } from '@fusion.dev/helix-headless/canvas';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One card or group on a canvas.
+ *
+ * @description
+ * The card is the host, because the board places the host: its coordinates are
+ * written onto this element, so a wrapper inside would have to be told the same
+ * things twice.
+ *
+ * **Before it is placed it is a card in the flow**, which is what a page
+ * without JavaScript has: the text somebody wrote, in the order they wrote it,
+ * rather than a heap at the origin.
+ *
+ * @since 0.100.0
+ * @status experimental
+ * @category media
+ * @aliases CanvasCard, BoardNode
+ * @documentation https://fusion.dev/helix/components/canvas
+ *
+ * @cssproperty --canvas-grip-size - How large the corners a selected card is resized from are.
+ * @cssproperty --canvas-handle-size - How large the points a connection is drawn from are.
+ * @cssproperty --canvas-move-block-size - How tall the grip a selected card is moved by is.
+ * @cssproperty --canvas-move-inline-size - How wide the grip a selected card is moved by is.
+ * @cssproperty --canvas-move-inset - How far in from the card's corner that grip sits.
+ * @cssproperty --canvas-node-background-color - The ground the card is drawn on.
+ * @cssproperty --canvas-node-color - A color with no meaning, where a tone will not do: a hex a document chose.
+ * @cssproperty --canvas-node-padding - Space between the card's edge and what it holds.
+ * @cssproperty --canvas-node-shadow - The lift under the card, which `separation="elevated"` sets.
+ */
+export declare class HelixCanvasNode extends HelixHeadlessCanvasNode {
+    /**
+     * What the card's ground is made of: `glass` or `frosted`, which let the
+     * board's ruling show through, or `transparent`.
+     *
+     * Absent is an opaque surface, a resting value being an attribute's absence.
+     */
+    material?: 'frosted' | 'glass' | 'transparent';
+    /**
+     * How the card stands off the board.
+     *
+     * Outlined is where it rests, a surface with its color as the edge. `filled`
+     * puts the color into the ground, `elevated` lifts it and keeps the edge, and
+     * `plain` draws no box, for a label sitting on the board.
+     */
+    separation?: 'elevated' | 'filled' | 'outlined' | 'plain';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-canvas-node': HelixCanvasNode;
+    }
+}

package/dist/canvas/node/canvas-node.js

@@ -0,0 +1,23 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessCanvasNode } from '@fusion.dev/helix-headless/canvas';
+import { property } from 'lit/decorators.js';
+import { styles } from './canvas-node.css.js';
+let HelixCanvasNode = class HelixCanvasNode extends HelixHeadlessCanvasNode {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixCanvasNode.prototype, "material", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixCanvasNode.prototype, "separation", void 0);
+HelixCanvasNode = __decorate([
+    customElement('helix-canvas-node')
+], HelixCanvasNode);
+export { HelixCanvasNode };

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

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