@mcp-b/geo-support 0.2.0

package/dist/components/classify-panel/classify-panel.styles.js

@@ -0,0 +1,96 @@
+import { css } from "lit";
+export default css `
+  :host {
+    display: block;
+    font-family: var(--sigvelo-font-sans, sans-serif);
+    font-size: var(--sigvelo-control-text-sm, 0.8125rem);
+    color: var(--sigvelo-color-text, #1a1a1a);
+  }
+
+  .panel {
+    background: var(--sigvelo-color-surface, #fff);
+    border: 1px solid var(--sigvelo-color-neutral-border-muted, #ddd);
+    border-radius: var(--sigvelo-radius-md, 6px);
+    padding: 0.75rem;
+    box-shadow: var(--sigvelo-elevation-floating, 0 2px 8px rgb(0 0 0 / 0.12));
+    width: 240px;
+  }
+
+  .panel__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    gap: 0.5rem;
+    user-select: none;
+    margin-bottom: 0.5rem;
+  }
+
+  .panel__title {
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  .panel__chevron {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    transition: transform var(--sigvelo-motion-duration-interaction) ease;
+    fill: currentColor;
+  }
+
+  :host([collapsed]) .panel__chevron {
+    transform: rotate(-90deg);
+  }
+
+  .panel__fields {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+  }
+
+  .panel__field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .panel__label {
+    font-weight: 500;
+    font-size: 0.75rem;
+    color: var(--sigvelo-color-text-muted, #666);
+  }
+
+  select {
+    appearance: none;
+    background: var(--sigvelo-color-surface, #fff);
+    border: 1px solid var(--sigvelo-color-neutral-border-muted, #ddd);
+    border-radius: var(--sigvelo-radius-sm, 4px);
+    padding: 0.25rem 1.5rem 0.25rem 0.5rem;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.375rem center;
+  }
+
+  select:focus-visible {
+    outline: var(--sigvelo-border-style, solid) 2px var(--sigvelo-color-focus, #4a97f4);
+    outline-offset: 1px;
+  }
+
+  .panel__color-bar {
+    display: flex;
+    gap: 1px;
+    margin-top: 0.25rem;
+    height: 12px;
+    border-radius: var(--sigvelo-radius-xs, 2px);
+    overflow: hidden;
+  }
+
+  .panel__color-bar-segment {
+    flex: 1;
+  }
+`;
+//# sourceMappingURL=classify-panel.styles.js.map

package/dist/components/classify-panel/classify-panel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"classify-panel.styles.js","sourceRoot":"","sources":["../../../src/components/classify-panel/classify-panel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FjB,CAAC"}

package/dist/components/legend/legend.d.ts

@@ -0,0 +1,49 @@
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+/**
+ * Displays a color-coded legend for classified/choropleth maps.
+ *
+ * When a `channel` attribute is set, the legend automatically updates
+ * from a sibling `<sigvelo-geo-classify-panel>` sharing the same channel.
+ *
+ * Place inside a `<sigvelo-*-control>` for on-map positioning, or
+ * anywhere in the DOM for external/sidebar mode.
+ *
+ * @tag sigvelo-geo-legend
+ *
+ * @csspart container - The outer legend container.
+ * @csspart title - The clickable title/header row.
+ * @csspart item - Each legend row (swatch + label).
+ * @csspart swatch - A color swatch square.
+ * @csspart label - A range label.
+ */
+export declare class SigveloGeoLegend extends SigveloElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Channel name for auto-syncing with a classify panel.
+     * When set, breaks, colors, and title update automatically.
+     */
+    channel: string;
+    /** Classification break points (numClasses + 1 values: [min, break1, ..., max]). */
+    breaks: number[];
+    /** Colors for each class (numClasses values). */
+    colors: string[];
+    /** Legend title (e.g., the property name being classified). */
+    title: string;
+    /** Whether the legend content is collapsed, showing only the title. */
+    collapsed: boolean;
+    /** @internal */
+    private _unsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal */
+    private _subscribeChannel;
+    private _formatNumber;
+    private _toggleCollapsed;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sigvelo-geo-legend": SigveloGeoLegend;
+    }
+}
+//# sourceMappingURL=legend.d.ts.map

package/dist/components/legend/legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../../src/components/legend/legend.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAaxE;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,gBAAiB,SAAQ,cAAc;IAClD,MAAM,CAAC,MAAM,4BAAwB;IAErC;;;OAGG;IACS,OAAO,SAAM;IAEzB,oFAAoF;IACpD,MAAM,EAAE,MAAM,EAAE,CAAM;IAEtD,iDAAiD;IACjB,MAAM,EAAE,MAAM,EAAE,CAAM;IAEtD,+DAA+D;IACnD,KAAK,SAAM;IAEvB,uEAAuE;IAC3B,SAAS,UAAS;IAE9D,gBAAgB;IAChB,OAAO,CAAC,YAAY,CAA6B;IAEjD,iBAAiB;IAKjB,oBAAoB;IAMpB,gBAAgB;IAChB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,gBAAgB;IAIxB,MAAM;CA8BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/components/legend/legend.js

@@ -0,0 +1,129 @@
+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 { html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { subscribeClassify } from "../../classification/channel.js";
+import styles from "./legend.styles.js";
+const chevronSvg = html `
+  <svg class="legend__chevron" viewBox="0 0 16 16" aria-hidden="true">
+    <path
+      d="M4.94 2.94a1.5 1.5 0 0 1 2.12 0L12 7.88a.17.17 0 0 1 0 .24l-4.94 4.94a1.5 1.5 0 0 1-2.12-2.12L8.88 7l-.94-.94L4.94 5.06a1.5 1.5 0 0 1 0-2.12Z"
+    />
+  </svg>
+`;
+/**
+ * Displays a color-coded legend for classified/choropleth maps.
+ *
+ * When a `channel` attribute is set, the legend automatically updates
+ * from a sibling `<sigvelo-geo-classify-panel>` sharing the same channel.
+ *
+ * Place inside a `<sigvelo-*-control>` for on-map positioning, or
+ * anywhere in the DOM for external/sidebar mode.
+ *
+ * @tag sigvelo-geo-legend
+ *
+ * @csspart container - The outer legend container.
+ * @csspart title - The clickable title/header row.
+ * @csspart item - Each legend row (swatch + label).
+ * @csspart swatch - A color swatch square.
+ * @csspart label - A range label.
+ */
+let SigveloGeoLegend = class SigveloGeoLegend extends SigveloElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Channel name for auto-syncing with a classify panel.
+         * When set, breaks, colors, and title update automatically.
+         */
+        this.channel = "";
+        /** Classification break points (numClasses + 1 values: [min, break1, ..., max]). */
+        this.breaks = [];
+        /** Colors for each class (numClasses values). */
+        this.colors = [];
+        /** Legend title (e.g., the property name being classified). */
+        this.title = "";
+        /** Whether the legend content is collapsed, showing only the title. */
+        this.collapsed = false;
+        /** @internal */
+        this._unsubscribe = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._subscribeChannel();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._unsubscribe?.();
+        this._unsubscribe = null;
+    }
+    /** @internal */
+    _subscribeChannel() {
+        this._unsubscribe?.();
+        if (!this.channel)
+            return;
+        this._unsubscribe = subscribeClassify(this.channel, (detail) => {
+            this.breaks = detail.breaks;
+            this.colors = detail.colors;
+            this.title = detail.property;
+        });
+    }
+    _formatNumber(n) {
+        return n.toLocaleString(undefined, { maximumSignificantDigits: 4 });
+    }
+    _toggleCollapsed() {
+        this.collapsed = !this.collapsed;
+    }
+    render() {
+        const items = !this.collapsed && this.colors.length > 0 && this.breaks.length > this.colors.length
+            ? html `
+            <div class="legend__items">
+              ${this.colors.map((color, i) => html `
+                  <div class="legend__item" part="item">
+                    <span class="legend__swatch" part="swatch" style="background:${color}"></span>
+                    <span class="legend__label" part="label">
+                      ${this._formatNumber(this.breaks[i])} &ndash;
+                      ${this._formatNumber(this.breaks[i + 1])}
+                    </span>
+                  </div>
+                `)}
+            </div>
+          `
+            : nothing;
+        return html `
+      <div class="legend" part="container">
+        <div class="legend__header" part="title" @click=${this._toggleCollapsed}>
+          <span class="legend__title">${this.title || "Legend"}</span>
+          ${chevronSvg}
+        </div>
+        ${items}
+      </div>
+    `;
+    }
+};
+SigveloGeoLegend.styles = [hostStyles, styles];
+__decorate([
+    property()
+], SigveloGeoLegend.prototype, "channel", void 0);
+__decorate([
+    property({ attribute: false })
+], SigveloGeoLegend.prototype, "breaks", void 0);
+__decorate([
+    property({ attribute: false })
+], SigveloGeoLegend.prototype, "colors", void 0);
+__decorate([
+    property()
+], SigveloGeoLegend.prototype, "title", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SigveloGeoLegend.prototype, "collapsed", void 0);
+SigveloGeoLegend = __decorate([
+    customElement("sigvelo-geo-legend")
+], SigveloGeoLegend);
+export { SigveloGeoLegend };
+//# sourceMappingURL=legend.js.map

package/dist/components/legend/legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.js","sourceRoot":"","sources":["../../../src/components/legend/legend.ts"],"names":[],"mappings":"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"}

package/dist/components/legend/legend.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=legend.styles.d.ts.map

package/dist/components/legend/legend.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.styles.d.ts","sourceRoot":"","sources":["../../../src/components/legend/legend.styles.ts"],"names":[],"mappings":";AAEA,wBAyEE"}

package/dist/components/legend/legend.styles.js

@@ -0,0 +1,76 @@
+import { css } from "lit";
+export default css `
+  :host {
+    display: block;
+    font-family: var(--sigvelo-font-sans, sans-serif);
+    font-size: var(--sigvelo-control-text-sm, 0.8125rem);
+    color: var(--sigvelo-color-text, #1a1a1a);
+  }
+
+  .legend {
+    background: var(--sigvelo-color-surface, #fff);
+    border: 1px solid var(--sigvelo-color-neutral-border-muted, #ddd);
+    border-radius: var(--sigvelo-radius-md, 6px);
+    padding: 0.5rem 0.75rem;
+    box-shadow: var(--sigvelo-elevation-floating, 0 2px 8px rgb(0 0 0 / 0.12));
+    min-width: 140px;
+    max-width: 220px;
+  }
+
+  .legend__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    gap: 0.5rem;
+    user-select: none;
+  }
+
+  .legend__title {
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .legend__chevron {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    transition: transform var(--sigvelo-motion-duration-interaction) ease;
+    fill: currentColor;
+  }
+
+  :host([collapsed]) .legend__chevron {
+    transform: rotate(-90deg);
+  }
+
+  .legend__items {
+    margin-top: 0.375rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .legend__item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.0625rem 0;
+  }
+
+  .legend__swatch {
+    width: 18px;
+    height: 18px;
+    border-radius: var(--sigvelo-radius-xs, 2px);
+    flex-shrink: 0;
+    border: 1px solid var(--sigvelo-color-neutral-border-subtle, #e5e5e5);
+  }
+
+  .legend__label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+//# sourceMappingURL=legend.styles.js.map

package/dist/components/legend/legend.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.styles.js","sourceRoot":"","sources":["../../../src/components/legend/legend.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyEjB,CAAC"}