@fusion.dev/helix 0.145.0 → 0.147.0

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

@@ -1,370 +1,13 @@
 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;
-
---_heading-ink: var(--helix-color-foreground);
-
---_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);
-
-left: var(--_canvas-card-x);
-top: var(--_canvas-card-y);
-
-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"],
+export const styles = createSheet(`:host {--_canvas-card-x: 0px;--_canvas-card-y: 0px;--_canvas-card-inline-size: auto;--_canvas-card-block-size: auto;--_heading-ink: var(--helix-color-foreground);--_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);left: var(--_canvas-card-x);top: var(--_canvas-card-y);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 (forced-colors: active) {
-:host(:state(target)) {
-outline: var(--helix-border-thick) solid Highlight;
-outline-offset: var(--helix-space-2xs);
-}
-}
-
-@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(:state(placed))) {
-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(: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 (forced-colors: active) {:host(:state(target)) {outline: var(--helix-border-thick) solid Highlight;outline-offset: var(--helix-space-2xs);}}@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(:state(placed))) {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;
-}`);
+: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/root/canvas-root.css.js

@@ -1,275 +1,12 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: contents;
-}
-
-[part="region"] {
-background-color: var(--canvas-background-color, var(--helix-color-surface-sunken));
-block-size: var(--canvas-block-size, 30rem);
-border: var(--helix-border-thin) solid var(--canvas-border-color, var(--helix-color-border));
-border-radius: var(--helix-radii-sm);
-box-sizing: border-box;
-display: grid;
-grid-template-rows: auto 1fr auto;
-overflow: hidden;
-position: relative;
-}
-
-:host([separation="plain"]) [part="region"] {
-background-color: transparent;
-border: none;
-border-radius: 0;
-}
-
-[part="viewport"] {
-min-block-size: 0;
-overflow: hidden;
-position: relative;
-}
-
-:host(:not(:state(empty))) ::slotted([slot="empty"]) {
-display: none;
-}
-
-[part="board"] {
-block-size: var(--_canvas-plane-block-size);
-inline-size: var(--_canvas-plane-inline-size);
-
-left: 0;
-position: absolute;
-top: 0;
-transform: translate(var(--_canvas-x), var(--_canvas-y)) scale(var(--_canvas-zoom));
-transform-origin: 0 0;
-
-transition: transform var(--helix-duration-normal) var(--helix-easing-standard);
-}
-
-:host([grid]) [part="viewport"] {
-background-position: var(--_canvas-rule-x) var(--_canvas-rule-y);
-background-size: calc(var(--canvas-grid-size, 32px) * var(--_canvas-rule-zoom))
-calc(var(--canvas-grid-size, 32px) * var(--_canvas-rule-zoom));
-
-transition:
+export const styles = createSheet(`:host {display: contents;}[part="region"] {background-color: var(--canvas-background-color, var(--helix-color-surface-sunken));block-size: var(--canvas-block-size, 30rem);border: var(--helix-border-thin) solid var(--canvas-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-sizing: border-box;display: grid;grid-template-rows: auto 1fr auto;overflow: hidden;position: relative;}:host([separation="plain"]) [part="region"] {background-color: transparent;border: none;border-radius: 0;}[part="viewport"] {min-block-size: 0;overflow: hidden;position: relative;}:host(:not(:state(empty))) ::slotted([slot="empty"]) {display: none;}[part="board"] {block-size: var(--_canvas-plane-block-size);inline-size: var(--_canvas-plane-inline-size);left: 0;position: absolute;top: 0;transform: translate(var(--_canvas-x), var(--_canvas-y)) scale(var(--_canvas-zoom));transform-origin: 0 0;transition: transform var(--helix-duration-normal) var(--helix-easing-standard);}:host([grid]) [part="viewport"] {background-position: var(--_canvas-rule-x) var(--_canvas-rule-y);background-size: calc(var(--canvas-grid-size, 32px) * var(--_canvas-rule-zoom))
+calc(var(--canvas-grid-size, 32px) * var(--_canvas-rule-zoom));transition:
 background-position var(--helix-duration-normal) var(--helix-easing-standard),
-background-size var(--helix-duration-normal) var(--helix-easing-standard);
-}
-
-:host([grid="lines"]) [part="viewport"] {
---_canvas-rule: color-mix(in oklab, var(--helix-color-border) 50%, transparent);
-background-image:
+background-size var(--helix-duration-normal) var(--helix-easing-standard);}:host([grid="lines"]) [part="viewport"] {--_canvas-rule: color-mix(in oklab, var(--helix-color-border) 50%, transparent);background-image:
 linear-gradient(to right, var(--_canvas-rule) var(--helix-border-thin), transparent 0),
-linear-gradient(to bottom, var(--_canvas-rule) var(--helix-border-thin), transparent 0);
-}
-
-:host([grid="dots"]) [part="viewport"] {
-background-image: radial-gradient(
+linear-gradient(to bottom, var(--_canvas-rule) var(--helix-border-thin), transparent 0);}:host([grid="dots"]) [part="viewport"] {background-image: radial-gradient(
 var(--helix-color-border) var(--helix-border-thin),
 transparent 0
-);
-}
-
-:host(:state(direct)) [part="board"],
-:host(:state(direct)) [part="viewport"] {
-transition: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="board"],
-:host([grid]) [part="viewport"] {
-transition: none;
-}
-}
-
-[part="edges"] {
-inset: 0;
-overflow: visible;
-position: absolute;
-z-index: var(--helix-layer-beneath);
-}
-
-[part="edge"] {
-stroke: var(--_canvas-edge-color, var(--canvas-edge-color, var(--helix-color-border)));
-stroke-width: var(--helix-border-thick);
-}
-
-[part="edge"] {
-pointer-events: none;
-}
-
-[part="edge-target"] {
-cursor: grab;
-pointer-events: stroke;
-stroke: transparent;
-stroke-width: var(--canvas-edge-target-width, 12px);
-}
-
-[part="edge-target"]:focus {
-outline: none;
-}
-
-[part="edge-target"]:hover + [part="edge"] {
-stroke: var(--helix-color-focus-ring);
-}
-
-[part="edge-target"]:focus-visible + [part="edge"] {
-stroke: var(--helix-color-focus-ring);
-stroke-width: calc(var(--helix-border-thick) * 2);
-}
-
-[part="edge-end"] {
-background-color: var(--helix-color-accent);
-block-size: var(--canvas-handle-size, 0.625rem);
-border: var(--helix-border-thick) solid var(--helix-color-surface);
-border-radius: var(--helix-radii-full);
-box-sizing: border-box;
-cursor: grab;
-inline-size: var(--canvas-handle-size, 0.625rem);
-left: var(--_canvas-end-x);
-position: absolute;
-top: var(--_canvas-end-y);
-transform: translate(-50%, -50%);
-z-index: 1;
-}
-
-[part="edge-end"]::after {
-content: "";
-inset: calc(var(--helix-space-sm) * -1);
-position: absolute;
-}
-
-:host(:state(holding)) [part="viewport"] {
-cursor: grabbing;
-}
-
-[part="label-editor"] {
-background-color: var(--helix-color-surface);
-border: var(--helix-border-thin) solid var(--helix-color-accent);
-border-radius: var(--helix-radii-sm);
-box-sizing: border-box;
-color: var(--helix-color-foreground);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-inline-size: var(--canvas-label-editor-inline-size, 12rem);
-left: var(--_canvas-editor-x);
-padding: var(--helix-space-2xs) var(--helix-space-xs);
-position: absolute;
-text-align: center;
-top: var(--_canvas-editor-y);
-transform: translate(-50%, -50%);
-z-index: 1;
-}
-
-[part="label-editor"][data-target="group"] {
-text-align: start;
-transform: translate(0, -100%);
-}
-
-[part="label-editor"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="marquee"] {
-background-color: color-mix(in oklab, var(--helix-color-accent) 10%, transparent);
-block-size: var(--_canvas-marquee-block-size);
-border: var(--helix-border-thin) dashed var(--helix-color-accent);
-box-sizing: border-box;
-inline-size: var(--_canvas-marquee-inline-size);
-left: var(--_canvas-marquee-x);
-pointer-events: none;
-position: absolute;
-top: var(--_canvas-marquee-y);
-z-index: 1;
-}
-
-[part="draft"] {
-pointer-events: none;
-stroke: var(--helix-color-accent);
-stroke-dasharray: 6 4;
-stroke-width: var(--helix-border-thick);
-}
-
-:host(:state(connecting)) [part="viewport"] {
-cursor: crosshair;
-}
-
-[part="arrow"] {
-fill: var(--canvas-edge-color, var(--helix-color-border));
-}
-
-@supports (fill: context-stroke) {
-[part="arrow"] {
-fill: context-stroke;
-}
-}
-
-[part="edge"][data-tone="accent"] {
-stroke: var(--helix-color-accent);
-}
-[part="edge"][data-tone="danger"] {
-stroke: var(--helix-color-danger);
-}
-[part="edge"][data-tone="info"] {
-stroke: var(--helix-color-info);
-}
-[part="edge"][data-tone="primary"] {
-stroke: var(--helix-color-primary);
-}
-[part="edge"][data-tone="success"] {
-stroke: var(--helix-color-success);
-}
-[part="edge"][data-tone="warning"] {
-stroke: var(--helix-color-warning);
-}
-
-[part="edge"][data-selected] {
-stroke: var(--helix-color-accent);
-stroke-width: calc(var(--helix-border-thick) * 2);
-}
-
-[part="edge"][data-variant="dashed"] {
-stroke-dasharray: 6 4;
-}
-
-[part="edge"][data-variant="dotted"] {
-stroke-dasharray: 0 5;
-stroke-linecap: round;
-}
-
-[part="label"] {
-background-color: var(--canvas-background-color, var(--helix-color-surface-sunken));
-color: var(--helix-color-foreground-subtle);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-left: var(--_canvas-label-x);
-line-height: 1;
-padding: var(--helix-space-2xs);
-pointer-events: none;
-position: absolute;
-top: var(--_canvas-label-y);
-transform: translate(-50%, -50%);
-white-space: nowrap;
-}
-
-[part="viewport"] {
-cursor: grab;
-touch-action: none;
-}
-
-:host(:state(sharing)) [part="viewport"] {
-touch-action: pan-x pan-y;
-}
-
-:host(:state(pressing)) [part="viewport"] {
-user-select: none;
-}
-
-[part="viewport"]:active {
-cursor: grabbing;
-}
-
-@media print {
-[part="controls"] {
-display: none;
-}
-}`);
+);}:host(:state(direct)) [part="board"],
+:host(:state(direct)) [part="viewport"] {transition: none;}@media (prefers-reduced-motion: reduce) {[part="board"],
+:host([grid]) [part="viewport"] {transition: none;}}[part="edges"] {inset: 0;overflow: visible;position: absolute;z-index: var(--helix-layer-beneath);}[part="edge"] {stroke: var(--_canvas-edge-color, var(--canvas-edge-color, var(--helix-color-border)));stroke-width: var(--helix-border-thick);}[part="edge"] {pointer-events: none;}[part="edge-target"] {cursor: grab;pointer-events: stroke;stroke: transparent;stroke-width: var(--canvas-edge-target-width, 12px);}[part="edge-target"]:focus {outline: none;}[part="edge-target"]:hover + [part="edge"] {stroke: var(--helix-color-focus-ring);}[part="edge-target"]:focus-visible + [part="edge"] {stroke: var(--helix-color-focus-ring);stroke-width: calc(var(--helix-border-thick) * 2);}[part="edge-end"] {background-color: var(--helix-color-accent);block-size: var(--canvas-handle-size, 0.625rem);border: var(--helix-border-thick) solid var(--helix-color-surface);border-radius: var(--helix-radii-full);box-sizing: border-box;cursor: grab;inline-size: var(--canvas-handle-size, 0.625rem);left: var(--_canvas-end-x);position: absolute;top: var(--_canvas-end-y);transform: translate(-50%, -50%);z-index: 1;}[part="edge-end"]::after {content: "";inset: calc(var(--helix-space-sm) * -1);position: absolute;}:host(:state(holding)) [part="viewport"] {cursor: grabbing;}[part="label-editor"] {background-color: var(--helix-color-surface);border: var(--helix-border-thin) solid var(--helix-color-accent);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);inline-size: var(--canvas-label-editor-inline-size, 12rem);left: var(--_canvas-editor-x);padding: var(--helix-space-2xs) var(--helix-space-xs);position: absolute;text-align: center;top: var(--_canvas-editor-y);transform: translate(-50%, -50%);z-index: 1;}[part="label-editor"][data-target="group"] {text-align: start;transform: translate(0, -100%);}[part="label-editor"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="marquee"] {background-color: color-mix(in oklab, var(--helix-color-accent) 10%, transparent);block-size: var(--_canvas-marquee-block-size);border: var(--helix-border-thin) dashed var(--helix-color-accent);box-sizing: border-box;inline-size: var(--_canvas-marquee-inline-size);left: var(--_canvas-marquee-x);pointer-events: none;position: absolute;top: var(--_canvas-marquee-y);z-index: 1;}[part="draft"] {pointer-events: none;stroke: var(--helix-color-accent);stroke-dasharray: 6 4;stroke-width: var(--helix-border-thick);}:host(:state(connecting)) [part="viewport"] {cursor: crosshair;}[part="arrow"] {fill: var(--canvas-edge-color, var(--helix-color-border));}@supports (fill: context-stroke) {[part="arrow"] {fill: context-stroke;}}[part="edge"][data-tone="accent"] {stroke: var(--helix-color-accent);}[part="edge"][data-tone="danger"] {stroke: var(--helix-color-danger);}[part="edge"][data-tone="info"] {stroke: var(--helix-color-info);}[part="edge"][data-tone="primary"] {stroke: var(--helix-color-primary);}[part="edge"][data-tone="success"] {stroke: var(--helix-color-success);}[part="edge"][data-tone="warning"] {stroke: var(--helix-color-warning);}[part="edge"][data-selected] {stroke: var(--helix-color-accent);stroke-width: calc(var(--helix-border-thick) * 2);}[part="edge"][data-variant="dashed"] {stroke-dasharray: 6 4;}[part="edge"][data-variant="dotted"] {stroke-dasharray: 0 5;stroke-linecap: round;}[part="label"] {background-color: var(--canvas-background-color, var(--helix-color-surface-sunken));color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);left: var(--_canvas-label-x);line-height: 1;padding: var(--helix-space-2xs);pointer-events: none;position: absolute;top: var(--_canvas-label-y);transform: translate(-50%, -50%);white-space: nowrap;}[part="viewport"] {cursor: grab;touch-action: none;}:host(:state(sharing)) [part="viewport"] {touch-action: pan-x pan-y;}:host(:state(pressing)) [part="viewport"] {user-select: none;}[part="viewport"]:active {cursor: grabbing;}@media print {[part="controls"] {display: none;}}`);