--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/RdfdbSyncedGraph.ts	Sun May 12 19:02:10 2024 -0700
@@ -0,0 +1,62 @@
+import debug from "debug";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { SyncedGraph } from "./SyncedGraph";
+
+const log = debug("syncedgraph-el");
+
+// Contains a SyncedGraph. Displays as little status box.
+// Put one element on your page and use getTopGraph everywhere.
+@customElement("rdfdb-synced-graph")
+export class RdfdbSyncedGraph extends LitElement {
+  @property() graph: SyncedGraph;
+  @property() status: string;
+  @property() testGraph = false;
+  static styles = [
+    css`
+      :host {
+        display: inline-block;
+        border: 1px solid gray;
+        min-width: 22em;
+        background: #05335a;
+        color: #4fc1d4;
+      }
+    `,
+  ];
+  render() {
+    return html`graph: ${this.status}`;
+  }
+
+  constructor() {
+    super();
+    this.status = "startup";
+    const prefixes = new Map<string, string>([
+      ["", "http://light9.bigasterisk.com/"],
+      ["dev", "http://light9.bigasterisk.com/device/"],
+      ["effect", "http://light9.bigasterisk.com/effect/"],
+      ["rdf", "http://www.w3.org/1999/02/22-rdf-syntax-ns#"],
+      ["rdfs", "http://www.w3.org/2000/01/rdf-schema#"],
+      ["xsd", "http://www.w3.org/2001/XMLSchema#"],
+    ]);
+    this.graph = new SyncedGraph(
+      this.testGraph ? "unused" : "/service/rdfdb/syncedGraph",
+      prefixes,
+      (s: string) => {
+        this.status = s;
+      }
+    );
+    setTopGraph(this.graph);
+  }
+}
+
+// todo: consider if this has anything to contribute:
+// https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md
+let setTopGraph: (sg: SyncedGraph) => void;
+(window as any).topSyncedGraph = new Promise<SyncedGraph>((res, rej) => {
+  setTopGraph = res;
+});
+
+export async function getTopGraph(): Promise<SyncedGraph> {
+  const s = (window as any).topSyncedGraph;
+  return await s;
+}