@lapis-notes/graph 0.1.0

package/dist/styles.css

@@ -0,0 +1,441 @@
+.graph-view {
+  --ui-graph-surface-background: var(
+    --ui-workspace-view-background,
+    var(--background)
+  );
+  --ui-graph-surface-foreground: var(
+    --ui-workspace-view-foreground,
+    var(--foreground)
+  );
+  --ui-graph-surface-border: var(--ui-workspace-view-border, var(--border));
+  --graph-text: var(--ui-graph-surface-foreground);
+  --graph-line: var(--input, #d4d4d4);
+  --graph-node: var(--muted-foreground);
+  --graph-node-unresolved: color-mix(
+    in srgb,
+    var(--graph-node) 50%,
+    var(--ui-graph-surface-background)
+  );
+  --graph-node-focused: var(--ring, var(--primary));
+  --graph-node-tag: var(--success, #16a34a);
+  --graph-node-attachment: #e0ac00;
+  --ui-graph-link: var(--graph-line);
+  --ui-graph-link-active: var(--graph-node-focused);
+  --ui-graph-node-note: var(--graph-node);
+  --ui-graph-node-attachment: var(--graph-node-attachment);
+  --ui-graph-node-tag: var(--graph-node-tag);
+  --ui-graph-node-unresolved: var(--graph-node-unresolved);
+  --ui-graph-node-neutral: var(--graph-node);
+  --ui-graph-node-label: var(--graph-text);
+  --ui-graph-node-label-hover: var(--graph-text);
+  --ui-graph-node-stroke: var(--ui-graph-surface-background);
+  --ui-graph-node-active-stroke: var(--graph-node-focused);
+  --ui-graph-node-focus-ring: var(--ring, var(--ui-graph-surface-foreground));
+  --ui-graph-stats-background: color-mix(
+    in srgb,
+    var(--ui-graph-surface-background) 90%,
+    transparent
+  );
+  --ui-graph-stats-foreground: var(--muted-foreground);
+  --ui-graph-controls-background: var(
+    --popover,
+    var(--ui-graph-surface-background)
+  );
+  --ui-graph-controls-foreground: var(
+    --popover-foreground,
+    var(--ui-graph-surface-foreground)
+  );
+  --ui-graph-controls-border: var(--ui-graph-surface-border);
+  --ui-graph-controls-hover: var(--muted);
+  --ui-graph-controls-muted: var(--muted-foreground);
+  --ui-sortable-array-item-focus-background: var(--ui-graph-controls-hover);
+  --ui-sortable-array-item-remove-hover-background: var(
+    --ui-graph-controls-hover
+  );
+  --ui-graph-controls-input-background: var(
+    --ui-workspace-view-secondary-background,
+    var(--background)
+  );
+  --ui-graph-controls-width: 300px;
+  --ui-graph-controls-shadow: var(
+    --ui-overlay-shadow,
+    0 10px 28px rgb(0 0 0 / 18%)
+  );
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  padding: 0.75rem;
+  overflow: hidden;
+  background: var(--ui-graph-surface-background);
+  color: var(--ui-graph-surface-foreground);
+}
+
+[data-ui-theme="lapis"].dark .graph-view,
+.dark [data-ui-theme="lapis"] .graph-view {
+  --graph-node-attachment: #e0de71;
+}
+
+.graph-view__layout {
+  position: relative;
+  display: flex;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.graph-view__surface {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  background: var(--ui-graph-surface-background);
+}
+
+.graph-view__stats,
+.graph-view__status {
+  position: absolute;
+  z-index: 10;
+  left: 0.75rem;
+  pointer-events: none;
+}
+
+.graph-view__stats {
+  top: 0.75rem;
+}
+
+.graph-view__status {
+  bottom: 0.75rem;
+  max-width: calc(100% - 1.5rem);
+  padding: 0.45rem 0.65rem;
+  border: 1px solid var(--ui-graph-controls-border);
+  border-radius: 0.5rem;
+  background: var(--ui-graph-stats-background);
+  color: var(--ui-graph-stats-foreground);
+  font-size: 0.75rem;
+  box-shadow: var(--ui-graph-controls-shadow);
+  backdrop-filter: blur(8px);
+}
+
+.graph-view__status[data-state="error"] {
+  border-color: var(--destructive);
+  color: var(--destructive);
+}
+
+.graph-view__stats-badge {
+  display: inline-flex;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--ui-graph-controls-border);
+  border-radius: 999px;
+  background: var(--ui-graph-stats-background);
+  color: var(--ui-graph-stats-foreground);
+  font-size: 0.75rem;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
+  backdrop-filter: blur(8px);
+}
+
+.graph-controls-toolbar {
+  position: absolute;
+  z-index: 10;
+  top: 0.25rem;
+  right: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--ui-graph-controls-border);
+  border-radius: 5px;
+  background: transparent;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 14%);
+  pointer-events: auto;
+}
+
+.graph-view .graph-controls-toolbar-button {
+  width: 26px;
+  min-width: 26px;
+  height: 26px;
+  min-height: 26px;
+  padding: 4px;
+  border: 0;
+  border-bottom: 1px solid var(--ui-graph-controls-border);
+  border-radius: 0;
+  background: var(--ui-graph-surface-background);
+  color: var(--ui-graph-controls-muted);
+  box-shadow: none;
+}
+
+.graph-view .graph-controls-toolbar-button:last-child,
+.graph-view .graph-controls-toolbar-button--last {
+  border-bottom: 0;
+}
+
+.graph-controls-panel {
+  position: absolute;
+  z-index: 20;
+  top: 2px;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  width: min(var(--ui-graph-controls-width), calc(100% - 0.5rem));
+  max-width: calc(100% - 0.5rem);
+  max-height: calc(100% - 0.5rem);
+  padding: 0;
+  overflow: auto;
+  border: 1px solid var(--ui-graph-controls-border);
+  border-radius: 0.625rem;
+  background: var(--ui-graph-controls-background);
+  color: var(--ui-graph-controls-foreground);
+  box-shadow: var(--ui-graph-controls-shadow);
+  pointer-events: auto;
+}
+
+.graph-controls-sections,
+.graph-controls-field-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.graph-controls-field-list {
+  gap: 1rem;
+}
+
+.graph-view .graph-controls-toolbar-button:hover,
+.graph-view .graph-controls-header-button:hover {
+  background: var(--ui-graph-controls-hover);
+  color: var(--ui-graph-controls-foreground);
+}
+
+.graph-view .graph-controls-header-button {
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
+  color: var(--ui-graph-controls-muted);
+}
+
+.graph-controls-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.graph-view .graph-controls-trigger {
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 40px;
+  padding-block: 0;
+  padding-inline: 1rem;
+  color: var(--ui-graph-controls-foreground);
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.graph-view .graph-controls-trigger[data-indicator-position="start"] {
+  padding-inline-start: 1rem;
+}
+
+.graph-view .graph-controls-trigger:is(:hover, :focus, :active) {
+  text-decoration: none;
+}
+
+.graph-controls-section-header {
+  position: relative;
+}
+
+.graph-view .graph-controls-trigger--actions {
+  width: 100%;
+  padding-inline-end: 7.5rem;
+}
+
+.graph-controls-trigger__content,
+.graph-controls-trigger__actions,
+.graph-controls-toggle-row,
+.graph-controls-slider__header {
+  display: flex;
+  align-items: center;
+}
+
+.graph-controls-trigger__content {
+  flex: 1;
+  min-width: 0;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.graph-controls-trigger__actions {
+  gap: 0.25rem;
+}
+
+.graph-controls-section-header > .graph-controls-trigger__actions {
+  position: absolute;
+  z-index: 1;
+  top: 0.25rem;
+  right: 0.5rem;
+}
+
+.graph-controls-section-content {
+  padding: 0.5rem 1rem 1.5rem 0.75rem;
+}
+
+.graph-view .graph-controls-input {
+  height: 2.25rem;
+  border-color: var(--ui-graph-controls-border);
+  border-radius: var(--radius);
+  background: var(--ui-graph-controls-input-background);
+  color: var(--ui-graph-controls-foreground);
+  font-size: 0.875rem;
+  box-shadow: none;
+}
+
+.graph-view .graph-controls-input::placeholder {
+  color: var(--ui-graph-controls-muted);
+}
+
+.graph-view [data-slot="accordion-item"] {
+  border-bottom: 1px solid var(--ui-graph-controls-border);
+}
+
+.graph-view [data-slot="accordion-item"]:last-child {
+  border-bottom: 0;
+}
+
+.graph-controls-toggle-row,
+.graph-controls-slider__header {
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.graph-controls-label,
+.graph-controls-slider__header {
+  font-size: 0.875rem;
+}
+
+.graph-controls-slider {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.graph-controls-slider__value {
+  color: var(--ui-graph-controls-muted);
+  font-size: 0.75rem;
+}
+
+.graph-controls-slider__control {
+  width: 100%;
+}
+
+.graph-controls-section-count {
+  color: var(--ui-graph-controls-muted);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.graph-controls-groups,
+.graph-controls-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.graph-controls-groups {
+  --ui-sortable-array-item-focus-background: var(
+    --ui-graph-controls-hover,
+    var(--muted)
+  );
+  --ui-sortable-array-item-remove-hover-background: var(
+    --ui-graph-controls-hover,
+    var(--muted)
+  );
+  gap: 0.75rem;
+}
+
+.graph-controls-group {
+  min-width: 0;
+  gap: 0.5rem;
+}
+
+.graph-controls-group__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+}
+
+.graph-controls-group__row > :first-child {
+  min-width: 0;
+}
+
+.graph-controls-groups
+  [data-ui-component="sortable-array-item"][data-ui-part="sortable-array-item"][data-inset="normal"]
+  [data-ui-part="sortable-array-item-drag"] {
+  left: 0.25rem;
+  opacity: 0.72;
+}
+
+.graph-controls-groups
+  [data-ui-component="sortable-array-item"][data-ui-part="sortable-array-item"][data-inset="normal"] {
+  box-sizing: border-box;
+  width: calc(100% + 0.75rem);
+  border-bottom: 0;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  border-radius: calc(var(--radius) * 0.75);
+}
+
+.graph-controls-groups
+  [data-ui-part="sortable-array-item-drag"]:hover:not(:focus-visible) {
+  outline: 0;
+  box-shadow: none;
+}
+
+.graph-controls-groups
+  [data-ui-component="sortable-array-item"][data-ui-part="sortable-array-item"]
+  [data-ui-component="button"].ui-sortable-array-item__remove {
+  right: 0.5rem;
+  width: 1rem;
+  height: 1rem;
+  opacity: 1;
+}
+
+.graph-view .graph-controls-add-group {
+  width: 100%;
+}
+
+.graph-view [data-slot="switch"] {
+  box-shadow: none;
+}
+
+.graph-view [data-slot="slider-track"] {
+  background: color-mix(
+    in srgb,
+    var(--ui-graph-controls-muted) 42%,
+    transparent
+  );
+}
+
+.graph-view [data-slot="slider-range"] {
+  background: var(--primary);
+}
+
+.graph-view [data-slot="slider-thumb"] {
+  background: var(--ui-graph-controls-input-background);
+}
+
+.graph-file-preview {
+  box-sizing: border-box;
+  width: min(26rem, calc(100vw - 2rem));
+  max-height: min(24rem, calc(100vh - 2rem));
+  padding: 0.75rem;
+}
+
+.graph-file-preview__scroll {
+  width: 100%;
+  height: 21rem;
+  min-height: 0;
+}

package/manifest.json

@@ -0,0 +1,30 @@
+{
+  "id": "lapis-graph",
+  "name": "Graph",
+  "version": "0.1.0",
+  "minAppVersion": "0.1.0",
+  "description": "Global and local graph views powered by indexed metadata",
+  "author": "Lapis Notes",
+  "authorUrl": "https://app.lapis.md",
+  "isDesktopOnly": false,
+  "lapis": {
+    "manifestVersion": 1,
+    "source": "official",
+    "locked": false,
+    "enabledByDefault": true,
+    "runtime": {
+      "entries": {
+        "workspace": {
+          "path": "main.mjs",
+          "format": "esm",
+          "sharedDependencies": [
+            "@lapis-notes/api",
+            "@lapis-notes/api/telemetry",
+            "@lapis-notes/markdown/embed"
+          ],
+          "requiresReloadOnUpdate": false
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@lapis-notes/graph",
+  "version": "0.1.0",
+  "description": "Lapis Notes global and local graph plugin",
+  "license": "AGPL-3.0-or-later",
+  "type": "module",
+  "files": [
+    "dist",
+    "manifest.json",
+    "styles.css",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE.md",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./embed": {
+      "types": "./dist/embed.d.ts",
+      "svelte": "./dist/embed.js",
+      "import": "./dist/embed.js",
+      "default": "./dist/embed.js"
+    },
+    "./app.css": {
+      "default": "./dist/styles.css"
+    },
+    "./styles.css": "./styles.css",
+    "./manifest.json": "./manifest.json"
+  },
+  "dependencies": {
+    "@lapis-notes/api": "^0.1.0",
+    "@lapis-notes/markdown": "^0.1.0",
+    "@lapismd/design-core": "^0.1.0",
+    "@lucide/svelte": "^0.523.0",
+    "d3-force": "^3.0.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.0",
+    "@sveltejs/vite-plugin-svelte": "^5.1.1",
+    "@tsconfig/svelte": "^5.0.5",
+    "@types/d3-force": "^3.0.10",
+    "publint": "^0.3.12",
+    "svelte": "^5.38.2",
+    "svelte-check": "^4.3.1",
+    "typescript": "~5.8.3",
+    "vite": "^6.4.2",
+    "vitest": "^4.1.8"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lapismd/lapis-plugins.git",
+    "directory": "packages/graph"
+  },
+  "homepage": "https://github.com/lapismd/lapis-plugins/tree/main/packages/graph#readme",
+  "bugs": {
+    "url": "https://github.com/lapismd/lapis-plugins/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "pnpm run prepack",
+    "check": "pnpm check:svelte && pnpm check:types",
+    "check:svelte": "svelte-check --tsconfig ./tsconfig.app.json --fail-on-warnings --output human",
+    "check:types": "tsc -p tsconfig.node.json --noEmit",
+    "test": "vitest run --passWithNoTests",
+    "publint": "publint",
+    "pack": "pnpm pack --pack-destination ../../.release/npm"
+  }
+}

package/styles.css

@@ -0,0 +1 @@
+@import "./dist/styles.css";