@fusion.dev/helix 0.115.0 → 0.117.0

package/dist/element-events.generated.js

@@ -87,6 +87,13 @@ registerElementEvents({
         'toggle',
     ],
     'helix-filter-menu': ['helix-facet'],
+    'helix-graph': [
+        'helix-activate',
+        'helix-before-activate',
+        'helix-graph-pan',
+        'helix-graph-ready',
+        'helix-graph-zoom',
+    ],
     'helix-heatmap': ['helix-resize'],
     'helix-image': ['error', 'load'],
     'helix-input': ['change', 'helix-before-change', 'input'],

package/dist/graph/index.d.ts

@@ -0,0 +1 @@
+export { HelixGraph } from './root/graph-root.js';

package/dist/graph/index.js

@@ -0,0 +1 @@
+export { HelixGraph } from './root/graph-root.js';

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

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

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

@@ -0,0 +1,208 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: contents;
+}
+
+[part="region"] {
+background-color: var(--graph-background-color, var(--helix-color-surface-sunken));
+block-size: var(--graph-block-size, 32rem);
+border: var(--helix-border-thin) solid var(--graph-border-color, var(--helix-color-border));
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+container-type: inline-size;
+display: grid;
+grid-template-rows: auto minmax(0, 1fr) auto;
+overflow: hidden;
+position: relative;
+}
+
+[part="body"] {
+display: grid;
+grid-template-columns: minmax(0, 1fr) var(--graph-panel-size, 18rem);
+min-block-size: 0;
+}
+
+[part="stage"] {
+isolation: isolate;
+min-block-size: 0;
+overflow: hidden;
+position: relative;
+}
+
+[part="viewport"] {
+inset: 0;
+position: absolute;
+}
+
+[part="viewport"] ::slotted(*) {
+block-size: 100%;
+inline-size: 100%;
+}
+
+[part="panel"] {
+background-color: var(--helix-color-surface);
+border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);
+color: var(--helix-color-foreground);
+display: grid;
+
+grid-template-columns: minmax(0, 1fr);
+grid-template-rows: auto minmax(0, 1fr);
+min-block-size: 0;
+}
+
+@container (inline-size < 40rem) {
+[part="body"] {
+grid-template-columns: minmax(0, 1fr);
+grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
+}
+
+[part="panel"] {
+border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
+border-inline-start: none;
+}
+}
+
+[part="search"] {
+align-items: center;
+border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+display: flex;
+gap: var(--helix-space-2xs);
+padding: var(--helix-space-2xs);
+padding-inline-start: var(--helix-space-xs);
+}
+
+[part="filter-icon"] {
+align-items: center;
+color: var(--helix-color-foreground-subtle);
+display: inline-flex;
+flex: 0 0 auto;
+}
+
+[part="filter-icon"] svg,
+slot[name="filter-icon"]::slotted(*) {
+--icon-size: var(--helix-size-icon-tight);
+
+block-size: var(--helix-size-icon-tight);
+inline-size: var(--helix-size-icon-tight);
+}
+
+[part="search-field"] {
+appearance: none;
+background-color: transparent;
+block-size: var(--helix-size-control-tight);
+border: none;
+box-sizing: border-box;
+color: var(--helix-color-foreground);
+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;
+padding-inline: var(--helix-space-2xs);
+}
+
+[part="search-field"]::placeholder {
+color: var(--helix-color-foreground-subtle);
+}
+
+[part="search-field"]:focus-visible {
+outline: none;
+}
+
+[part="search"]:has([part="search-field"]:focus-visible),
+[part="list"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
+[part="count"] {
+color: var(--helix-color-foreground-muted);
+flex: 0 0 auto;
+font-size: var(--helix-text-xs);
+font-variant-numeric: tabular-nums;
+
+padding-inline-end: calc(var(--helix-space-xs) - var(--helix-space-2xs));
+}
+
+[part="list"] {
+min-block-size: 0;
+overflow-y: auto;
+overscroll-behavior: contain;
+padding-block: var(--helix-space-2xs);
+}
+
+[part~="note"] {
+align-items: center;
+box-sizing: border-box;
+cursor: pointer;
+display: flex;
+font-size: var(--helix-text-sm);
+gap: var(--helix-space-sm);
+min-block-size: var(--helix-size-control-tight);
+padding-block: var(--helix-space-2xs);
+padding-inline: var(--helix-space-xs);
+user-select: none;
+}
+
+[part~="note"]:hover,
+[part="list"]:focus-visible [part~="note-cursor"] {
+--_graph-wash: light-dark(
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent),
+color-mix(in oklab, var(--helix-color-foreground) 12%, transparent)
+);
+
+background-image: linear-gradient(var(--_graph-wash), var(--_graph-wash));
+}
+
+[part="note-name"] {
+flex: 0 1 auto;
+max-inline-size: 70%;
+min-inline-size: 0;
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: nowrap;
+}
+
+[part="note-relation"] {
+color: var(--helix-color-foreground-muted);
+flex: 1 1 0;
+font-size: var(--helix-text-xs);
+min-inline-size: 0;
+overflow: hidden;
+text-align: end;
+text-overflow: ellipsis;
+white-space: nowrap;
+}
+
+[part~="note-selected"] {
+background-color: var(--helix-color-surface-sunken);
+}
+
+[part~="note-selected"] [part="note-name"] {
+font-weight: var(--helix-weight-semibold);
+}
+
+[part="header"],
+[part="footer"] {
+min-inline-size: 0;
+}
+
+@media (forced-colors: active) {
+[part="list"]:focus-visible [part~="note-cursor"] {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
+[part~="note-selected"],
+[part~="note-selected"] [part="note-relation"] {
+background-color: Highlight;
+color: HighlightText;
+forced-color-adjust: none;
+}
+}
+
+@media print {
+:host {
+print-color-adjust: economy;
+}
+}`);

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

@@ -0,0 +1,31 @@
+import { HelixHeadlessGraph } from '@fusion.dev/helix-headless/graph';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A frame around a graph of notes drawn by another library, and the list that makes it readable.
+ *
+ * @description
+ * The styled frame: the drawing with its zoom and fullscreen buttons, and the
+ * list of notes beside it, which moves below the drawing where the frame is
+ * narrower than 40rem. The selected note leads the list on a surface of its
+ * own, and the notes linked to it are named by how they link.
+ *
+ * @since 0.116.0
+ * @status experimental
+ * @category media
+ * @aliases Knowledge graph, Network, Note graph, Second brain
+ * @documentation https://fusion.dev/helix/components/graph
+ *
+ * @cssproperty --graph-background-color - The color behind the drawing while it loads.
+ * @cssproperty --graph-block-size - The frame's height, as a length.
+ * @cssproperty --graph-border-color - The frame's border color.
+ * @cssproperty --graph-panel-size - The list's width beside the drawing.
+ * @cssproperty --viewport-control-background-color - The background of the zoom and fullscreen buttons. Map and Canvas use the same property.
+ */
+export declare class HelixGraph extends HelixHeadlessGraph {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-graph': HelixGraph;
+    }
+}

package/dist/graph/root/graph-root.js

@@ -0,0 +1,18 @@
+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 { HelixHeadlessGraph } from '@fusion.dev/helix-headless/graph';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
+import { styles as viewportStyles } from '../../shared/viewport/viewport.css.js';
+import { styles } from './graph-root.css.js';
+let HelixGraph = class HelixGraph extends HelixHeadlessGraph {
+    static { this.styles = [liveStyles, viewportStyles, styles]; }
+};
+HelixGraph = __decorate([
+    customElement('helix-graph')
+], HelixGraph);
+export { HelixGraph };

package/dist/index.d.ts

@@ -45,6 +45,7 @@ export * from './file-input/index.js';
 export * from './filter-input/index.js';
 export * from './flex/index.js';
 export * from './format-date/index.js';
+export * from './graph/index.js';
 export * from './grid/index.js';
 export * from './heatmap/index.js';
 export * from './icon/index.js';

package/dist/index.js

@@ -40,6 +40,7 @@ export * from './file-input/index.js';
 export * from './filter-input/index.js';
 export * from './flex/index.js';
 export * from './format-date/index.js';
+export * from './graph/index.js';
 export * from './grid/index.js';
 export * from './heatmap/index.js';
 export * from './icon/index.js';

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

@@ -31,6 +31,43 @@ overflow: hidden;
 position: relative;
 }
 
+[part="gesture-hint"],
+[part="gesture-status"] {
+background-color: var(--helix-color-surface-inverse);
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-inverse);
+
+left: 50%;
+max-inline-size: calc(100% - var(--helix-space-lg) * 2);
+pointer-events: none;
+position: absolute;
+text-align: center;
+z-index: calc(var(--helix-layer-raised) + 2);
+}
+
+[part="gesture-hint"] {
+font-size: var(--helix-text-sm);
+inset-block-start: clamp(
+var(--helix-space-2xl),
+var(--_map-hint-y, 50%),
+calc(100% - var(--helix-space-2xl))
+);
+padding: var(--helix-space-xs) var(--helix-space-sm);
+translate: -50% -50%;
+}
+
+[part="gesture-status"] {
+font-size: var(--helix-text-xs);
+inset-block-start: var(--helix-space-xs);
+padding: var(--helix-space-2xs) var(--helix-space-xs);
+translate: -50% 0;
+}
+
+[part="gesture-hint"][hidden],
+[part="gesture-status"][hidden] {
+display: none;
+}
+
 [part="layers"] {
 block-size: 1px;
 clip-path: inset(50%);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.115.0",
+  "version": "0.117.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -51,13 +51,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.115.0",
-    "@fusion.dev/helix-headless": "0.115.0",
-    "@fusion.dev/helix-styles": "0.115.0"
+    "@fusion.dev/helix-core": "0.117.0",
+    "@fusion.dev/helix-headless": "0.117.0",
+    "@fusion.dev/helix-styles": "0.117.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.115.0",
-    "@fusion.dev/helix-testing": "0.115.0",
+    "@fusion.dev/helix-cem": "0.117.0",
+    "@fusion.dev/helix-testing": "0.117.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",