@popcorn245/cornfield-components 0.50.0 → 0.51.0

package/README.md

@@ -1,13 +1,17 @@
 # @popcorn245/cornfield-components
 
-[cornfield](https://github.com/popcorn245/CornField)'s interface as web components: `<corn-map>` today, more to follow. Built with StencilRS, as ES modules, with type declarations and a `tokens.css`.
+[cornfield](https://github.com/popcorn245/CornField)'s interface as web components: `<corn-review>` (a proposal on the map, with Approve and Send back, in one tag), `<corn-map>` and `<corn-scope>` today, more to follow. Built with StencilRS, as ES modules, with type declarations and a `tokens.css`.
 
 ```sh
 npm install @popcorn245/cornfield-components
 ```
 
 ```js
-import '@popcorn245/cornfield-components/corn-map';   // registers <corn-map>; or '@popcorn245/cornfield-components' for all of them
+import '@popcorn245/cornfield-components/corn-review';   // registers <corn-review>; or '@popcorn245/cornfield-components' for all of them
+```
+
+```html
+<corn-review src="https://map.example.com" proposal="0042-retire-the-old-export"></corn-review>
 ```
 
 The package carries cornfield's own version number: `0.48.0` of the package is the build of cornfield `0.48.0`, the one its server serves at `/cornfield/components/`. A page that does not use a bundler can load the same files from the server with one `<script type="module">` line.

package/dist/chunks/corn-map-B240mjGE.js

@@ -0,0 +1,122 @@
+import { n as e, r as t, t as n } from "./runtime-DFu6W5g-.js";
+import { t as r } from "./map-B6AeKeiu.js";
+import { a as i, t as a } from "./engine-ClfnAsgM.js";
+// \0stencil-css:/home/runner/work/CornField/CornField/explorer/pieces/map-stage?tag=corn-map&encapsulation=shadow&__ext=css
+var o = () => "[data-corn=map-stage]{background:var(--corn-ground-image), var(--corn-ground);width:100%;height:100%;min-height:16rem;display:block;position:relative;overflow:hidden}[data-corn=map-canvas]{cursor:grab;touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}[data-corn=map-canvas]:active{cursor:grabbing}[data-corn=map-canvas]:focus-visible{outline:var(--corn-focus-width) solid var(--corn-focus);outline-offset:calc(var(--corn-focus-width) * -1)}[data-corn=label-canvas]{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}[data-corn=map-overlay]{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.hx-sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:0;padding:0;overflow:hidden;position:absolute!important}", s = () => "[data-corn=source-status]{z-index:2;box-sizing:border-box;align-items:center;gap:var(--corn-space-3);width:min(26rem, calc(100% - var(--corn-space-6) * 2));padding:var(--corn-space-6);border:var(--corn-border) solid var(--corn-line);border-radius:var(--corn-radius-lg);background:var(--corn-surface-1);color:var(--corn-text-2);box-shadow:var(--corn-shadow);text-align:center;font-family:var(--corn-font);font-size:var(--corn-text-md);flex-direction:column;line-height:1.5;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}[data-corn=source-status][hidden]{display:none}[data-corn=source-status]:focus-visible{outline:var(--corn-focus-width) solid var(--corn-focus);outline-offset:var(--corn-focus-offset)}[data-corn=source-status][data-corn-state=running]{box-shadow:none;color:var(--corn-text-3);background:0 0;border-color:#0000;padding:0}[data-corn=source-status][data-corn-state=running] [data-corn=source-title]{font-size:var(--corn-text-md);color:var(--corn-text-3);font-weight:400}[data-corn=source-status][data-corn-state=failure] [data-corn=source-title]{color:var(--corn-bad)}[data-corn=source-status][data-corn-state=waiting] [data-corn=source-title]{color:var(--corn-accent-text)}[data-corn=source-title],[data-corn=source-text]{margin:0}[data-corn=source-title]{font-size:var(--corn-text-lg);color:var(--corn-text);font-weight:600}[data-corn=source-text]{overflow-wrap:anywhere;user-select:text}[data-corn=source-origin]{font-family:var(--corn-mono);color:var(--corn-warn);overflow-wrap:anywhere;user-select:all}[data-corn=source-sign-in],[data-corn=source-retry]{box-sizing:border-box;min-height:max(var(--corn-control-height), 2.75rem);padding:0 var(--corn-space-6);border:var(--corn-border) solid var(--corn-line);border-radius:var(--corn-radius);background:var(--corn-surface-2);color:var(--corn-text);font-family:inherit;font-size:inherit;cursor:pointer;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}[data-corn=source-sign-in]{border-color:var(--corn-accent);background:var(--corn-accent);color:var(--corn-text-on-accent);font-weight:600}[data-corn=source-sign-in]:hover{background:var(--corn-accent-hover)}[data-corn=source-retry]:hover{background:var(--corn-surface-3)}[data-corn=source-sign-in]:focus-visible,[data-corn=source-retry]:focus-visible{outline:var(--corn-focus-width) solid var(--corn-focus);outline-offset:var(--corn-focus-offset)}[data-corn=source-notice]{z-index:2;box-sizing:border-box;padding:var(--corn-space-3) var(--corn-space-6);background:var(--corn-surface-1);border-top:var(--corn-border) solid var(--corn-line-soft);color:var(--corn-text-2);font-family:var(--corn-font);font-size:var(--corn-text-sm);text-align:center;overflow-wrap:anywhere;margin:0;position:absolute;bottom:0;left:0;right:0}[data-corn=source-notice][hidden]{display:none}", c = () => ":host{contain:layout;min-width:0;color:var(--corn-text);font-family:var(--corn-font);display:block;position:relative}:host([hidden]){display:none!important}", l = class extends n {
+	constructor(t) {
+		super(), t !== !1 && this.__registerHost(), this.__attachShadow(), this.cornSelect = e(this, "cornSelect", 7), this.cornReady = e(this, "cornReady", 7), this.cornAuth = e(this, "cornAuth", 7), this.cornError = e(this, "cornError", 7);
+	}
+	get el() {
+		return this;
+	}
+	topology;
+	node;
+	view = "map";
+	theme;
+	renderer = "auto";
+	src;
+	useTheme = !1;
+	cornSelect;
+	cornReady;
+	cornAuth;
+	cornError;
+	piece = null;
+	scope = null;
+	loaded = !1;
+	changes = {};
+	connectedCallback() {
+		this.loaded && this.mountPiece();
+	}
+	componentDidLoad() {
+		this.loaded = !0, this.mountPiece();
+	}
+	disconnectedCallback() {
+		this.unmountPiece();
+	}
+	unmountPiece() {
+		this.piece && this.piece.destroy(), this.piece = null, this.scope && this.scope.leave(), this.scope = null;
+	}
+	remount() {
+		this.unmountPiece(), this.loaded && this.el.isConnected && this.mountPiece();
+	}
+	mountPiece() {
+		!this.piece && this.el.shadowRoot && (this.changes = {}, this.scope = i(this.el, () => this.remount()), this.piece = r(this.el.shadowRoot, this.scope.inst, {
+			topology: this.topology,
+			view: this.view,
+			node: this.node,
+			theme: this.theme,
+			renderer: this.renderer,
+			tokens: a,
+			src: this.src,
+			useTheme: this.useTheme,
+			version: "0.51.0",
+			pageUrl: () => typeof location > "u" ? "" : location.href,
+			onAuth: (e) => this.cornAuth.emit(e),
+			onError: (e) => this.cornError.emit(e),
+			onSelect: (e) => {
+				this.node = e.kind === "node" ? e.id : null, delete this.changes.node, this.cornSelect.emit(e);
+			},
+			onReady: () => this.cornReady.emit()
+		}));
+	}
+	componentDidRender() {
+		let e = this.changes;
+		this.changes = {}, this.piece && Object.keys(e).length && this.piece.update(e);
+	}
+	changed(e, t, n) {
+		this.changes[n] = e;
+	}
+	addressChanged() {
+		this.piece && this.scope && !this.scope.inst && this.remount();
+	}
+	async fit() {
+		this.piece && this.piece.fit();
+	}
+	async focusNode(e) {
+		this.piece && this.piece.focusNode(e);
+	}
+	async refresh() {
+		this.piece && this.piece.refresh();
+	}
+	static get watchers() {
+		return {
+			topology: [{ changed: 0 }],
+			view: [{ changed: 0 }],
+			node: [{ changed: 0 }],
+			theme: [{ changed: 0 }],
+			renderer: [{ changed: 0 }],
+			src: [{ addressChanged: 0 }],
+			useTheme: [{ addressChanged: 0 }]
+		};
+	}
+	static get style() {
+		return o() + s() + c();
+	}
+};
+t(l, [
+	513,
+	"corn-map",
+	{
+		topology: [16],
+		node: [1537],
+		view: [1],
+		theme: [513],
+		renderer: [1],
+		src: [1],
+		useTheme: [4, "use-theme"],
+		fit: [64],
+		focusNode: [64],
+		refresh: [64]
+	},
+	void 0,
+	{
+		topology: [{ changed: 0 }],
+		view: [{ changed: 0 }],
+		node: [{ changed: 0 }],
+		theme: [{ changed: 0 }],
+		renderer: [{ changed: 0 }],
+		src: [{ addressChanged: 0 }],
+		useTheme: [{ addressChanged: 0 }]
+	}
+]);
+export { l as t };