@popgrids/embed 0.0.1 → 0.0.2

package/AGENTS.md

@@ -0,0 +1,141 @@
+# Project Instructions (popgrids-embed)
+
+This project contains the embeddable Web Component discussion widget for PopGrids. It is a lightweight, self-contained client-side bundle designed to be embedded on third-party websites.
+
+## Technology Stack & Setup
+
+- **Core**: Vanilla Web Components (Shadow DOM) written in TypeScript.
+- **State Management**: `@preact/signals-core` for reactive signals and computed values.
+- **Styling**: Vanilla CSS. Imported inline using Vite's `?inline` parameter and compiled into adopted style sheets.
+  - *Note*: **Do not use Tailwind CSS** in this repository. All components use scoped shadow DOM styles.
+- **Positioning**: `@floating-ui/dom` for positioning the feed popup relative to the widget trigger.
+- **Realtime**: WebSockets connection for live comment delivery.
+- **Build System**: Vite.
+  - `vite.config.ts` builds the library version.
+  - `vite.embed.config.ts` builds the single self-contained embeddable JS script.
+
+## Core Development Commands
+
+- `pnpm run dev` — Watch-builds both library and embed scripts.
+- `pnpm run build` — Clean and build both targets (`dist/`).
+- `pnpm run demo:dev` — Launches concurrently the dev watch compiler and a live-reload server (`live-server`) on port 5500.
+
+## Component Conventions
+
+All UI components must inherit from the `BaseElement` abstract class ([base-element.ts](./src/components/base-element.ts)) which automates rendering, event binding, and reactive effects.
+
+### Component Structure Example
+
+When creating or modifying components, follow this structure:
+
+```typescript
+import { BaseElement, createSheet } from "./base-element.js";
+
+const localSheet = createSheet(/* css */ `
+  :host {
+    display: block;
+  }
+  .my-element {
+    color: var(--pop-foreground);
+  }
+`);
+
+export class PopMyComponent extends BaseElement {
+  protected get styleSheets() {
+    return [localSheet];
+  }
+
+  // Bind shadow DOM events automatically
+  protected events = {
+    click: "onClick",
+  };
+
+  protected onClick(event: MouseEvent) {
+    // Event handling
+  }
+
+  // Subscribe to signals inside setupEffects
+  protected setupEffects() {
+    this.addEffect(() => {
+      // Access preact signals here; component will re-evaluate on change.
+      // Call render() or update DOM nodes manually.
+    });
+  }
+
+  protected getTemplate(): string {
+    return /* html */ `
+      <div class="my-element">Hello World</div>
+    `;
+  }
+}
+
+// Define the custom element safely
+if (!customElements.get("pop-my-component")) {
+  customElements.define("pop-my-component", PopMyComponent);
+}
+```
+
+### Store Resolution & Context Consumption
+
+We propagate state using a custom context pattern instead of passing props manually through elements.
+
+- The root `<pop-grid>` component registers its `GridStore` in the registry during `connectedCallback()`: `registerStore(this, store)`.
+- Nested components retrieve the active store using the `@consume(StoreClass)` property decorator. This automatically traverses up the DOM tree and shadow root hosts to inject the registered store instance:
+
+  ```typescript
+  import { consume } from "../store/registry.js";
+  import { GridStore } from "../store/grid-store.js";
+
+  export class PopMyComponent extends BaseElement {
+    @consume(GridStore) gridStore!: GridStore;
+
+    protected setupEffects() {
+      this.addEffect(() => {
+        // Access reactive signals directly:
+        console.log(this.gridStore.replyingTo.value);
+      });
+    }
+  }
+  ```
+
+- **Context-Bound Stores vs. Global Singletons**:
+  - Context-bound stores (like `GridStore`) vary per widget instance and must be resolved using `@consume(StoreClass)`.
+  - Global singletons (like `auth-store` signals) are imported directly (e.g., `import { currentUser } from "../store/auth-store.js"`) and accessed statically.
+
+### Memory & Subscription Management
+
+- **Do not use `effect(...)` directly** inside components. Instead, always use `this.addEffect(() => { ... })` within `setupEffects()`.
+- `BaseElement` tracks the disposables registered via `addEffect` and cleans them up automatically inside `disconnectedCallback()`.
+- Use the provided helper methods on `BaseElement` to interact with the Shadow DOM safely:
+  - `this.getElement<T>(selector)`
+  - `this.setText(selector, text)`
+  - `this.setAttr(selector, attr, value)`
+  - `this.toggleClass(selector, className, force)`
+  - `this.hideElement(selector, shouldHide, useDisplayNone)`
+
+## Styling & Design System Conventions
+
+- **Design System Variables**: Prefer CSS custom properties from [base.css](./src/styles/base.css) (such as `--pop-foreground`, `--pop-background`, `--pop-ring`, and `--pop-radius-xs`) over hardcoded hex codes or ad-hoc custom properties.
+- **Dynamic Color Transparencies**: Use the CSS native `color-mix()` function (e.g. `color-mix(in srgb, var(--pop-foreground) 10%, transparent)`) to create alpha/transparency overlays. This ensures that transparency ratios dynamically adapt when switching between light and dark modes without requiring duplicate CSS overrides.
+
+## Releasing
+
+This package publishes to npm as [`@popgrids/embed`](https://www.npmjs.com/package/@popgrids/embed)
+using [Changesets](https://github.com/changesets/changesets). Same flow as `popgrids-ui`.
+
+- **Every change that affects the published output** needs a changeset: `pnpm changeset`, pick the
+  bump (patch/minor/major), write a one-line summary. Commit the generated file in `.changeset/`.
+- **On merge to `main`**, `.github/workflows/release.yml` runs: if pending changesets exist it runs
+  `changeset version` (bumps `package.json` + writes `CHANGELOG.md`), commits `chore: version
+  packages`, then `changeset publish` builds (`prepublishOnly` → `typecheck` + `build`) and publishes.
+- **Auth is npm OIDC trusted publishing** — no `NPM_TOKEN`. The workflow needs `id-token: write` and
+  a trusted publisher configured on npmjs.com for this package (repo `popgrids/popgrids-embed`,
+  workflow `release.yml`).
+- `.github/workflows/ci.yml` typechecks + builds every PR.
+- The published package ships both entries: `.` (the library, deps external) and `./embed` /
+  `dist/embed.js` (the self-contained CDN bundle, also the `unpkg`/`jsdelivr` target).
+
+## Plan Mode
+
+- Make the plan extremely concise. Sacrifice grammar for the sake of concision.
+- At the end of each plan, give me a list of unresolved questions to answer, if any.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright © PopGrids
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1 +1,60 @@
-# `@popgrids/embed`
+# @popgrids/embed
+
+The embeddable [PopGrids](https://popgrids.io) discussion widget — a lightweight, self-contained
+vanilla Web Component (Shadow DOM) you drop onto any page to add a context-aware comment thread.
+
+> **AI agents:** see [AGENTS.md](./AGENTS.md) for setup, component conventions, and the release process.
+
+## Installation
+
+```bash
+pnpm add @popgrids/embed
+```
+
+## Usage
+
+### Bundler
+
+Import the package once (it registers the custom elements as a side effect), then use the
+`<pop-grid>` element anywhere in your markup:
+
+```ts
+import "@popgrids/embed";
+```
+
+```html
+<pop-grid
+  data-key="pk_your_public_key"
+  data-api-url="https://api.popgrids.io"
+  data-id="article-hero"
+></pop-grid>
+```
+
+TypeScript model types are exported from the package root:
+
+```ts
+import type { AuthUser, Comment, CommentAuthor, Grid } from "@popgrids/embed";
+```
+
+### Script tag / CDN
+
+The `./embed` subpath is a single self-contained bundle with every dependency inlined — nothing else
+to load:
+
+```html
+<script type="module" src="https://unpkg.com/@popgrids/embed/dist/embed.js"></script>
+
+<pop-grid data-key="pk_your_public_key" data-api-url="https://api.popgrids.io"></pop-grid>
+```
+
+## `<pop-grid>` attributes
+
+| Attribute      | Required | Description                                                                       |
+| -------------- | -------- | ------------------------------------------------------------------------------- |
+| `data-key`     | yes      | Your grid's public key (`pk_…`).                                                |
+| `data-api-url` | yes      | Base URL of the PopGrids API.                                                   |
+| `data-id`      | no       | Names the thread. Same `data-id` = same discussion across pages. Defaults to the page's canonical URL. |
+
+## License
+
+MIT

package/dist/components/base-element.d.ts

@@ -0,0 +1,33 @@
+export declare function createSheet(cssText: string): CSSStyleSheet;
+export declare const sharedBaseSheet: CSSStyleSheet;
+export declare const btnSheet: CSSStyleSheet;
+export declare const masksSheet: CSSStyleSheet;
+export declare abstract class BaseElement extends HTMLElement implements EventListenerObject {
+    protected baseStyleSheets: CSSStyleSheet[];
+    protected get styleSheets(): CSSStyleSheet[];
+    private _hasRendered;
+    private _disposables;
+    constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Use this instead of calling effect() directly to ensure
+     * automatic cleanup when the component disconnects.
+     */
+    protected addEffect(callback: () => void): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected events: Record<string, string>;
+    private _bindEvents;
+    handleEvent(event: Event): void;
+    protected emit<T = unknown>(eventName: string, options?: CustomEventInit<T>): void;
+    protected abstract getTemplate(): string;
+    protected get styles(): CSSStyleSheet[];
+    protected setupEffects(): void;
+    protected render(): void;
+    protected hideElement(selector: string, shouldHide: boolean, useDisplayNone?: boolean): void;
+    protected setText(selector: string, text: string | number): void;
+    protected setAttr(selector: string, attr: string, value: string | null): void;
+    protected toggleClass(selector: string, className: string, force?: boolean): void;
+    protected getElement<T extends Element = HTMLElement>(selector: string): T | null;
+}
+//# sourceMappingURL=base-element.d.ts.map

package/dist/components/base-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-element.d.ts","sourceRoot":"","sources":["../../src/components/base-element.ts"],"names":[],"mappings":"AAMA,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,aAAa,CAI1D;AAED,eAAO,MAAM,eAAe,eAA0B,CAAC;AACvD,eAAO,MAAM,QAAQ,eAAyB,CAAC;AAC/C,eAAO,MAAM,UAAU,eAA2B,CAAC;AAInD,8BAAsB,WAAY,SAAQ,WAAY,YAAW,mBAAmB;IAClF,SAAS,CAAC,eAAe,EAAE,aAAa,EAAE,CAA2C;IACrF,SAAS,KAAK,WAAW,IAAI,aAAa,EAAE,CAE3C;IAED,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,YAAY,CAAyB;;IAU7C,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAcvF;;;OAGG;IACH,SAAS,CAAC,SAAS,CAAC,QAAQ,EAAE,MAAM,IAAI;IAIxC,iBAAiB;IASjB,oBAAoB;IAOpB,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAE9C,OAAO,CAAC,WAAW;IAUnB,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAQ/B,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,GAAE,eAAe,CAAC,CAAC,CAAM;IAW/E,SAAS,CAAC,QAAQ,CAAC,WAAW,IAAI,MAAM;IAExC,SAAS,KAAK,MAAM,IAAI,aAAa,EAAE,CAEtC;IAED,SAAS,CAAC,YAAY,IAAI,IAAI;IAE9B,SAAS,CAAC,MAAM;IAMhB,SAAS,CAAC,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,UAAO;IAkBlF,SAAS,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM;IAOzD,SAAS,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAWtE,SAAS,CAAC,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO;IAO1E,SAAS,CAAC,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,WAAW,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI;CAGlF"}

package/dist/components/pop-auth-panel.d.ts

@@ -0,0 +1,14 @@
+import { GridStore } from '../store/grid-store.js';
+import { BaseElement } from './base-element.js';
+export declare class PopAuthPanel extends BaseElement {
+    gridStore: GridStore;
+    protected get styleSheets(): CSSStyleSheet[];
+    protected events: {
+        click: string;
+    };
+    protected onClick(event: MouseEvent): void;
+    protected setupEffects(): void;
+    private handleJoin;
+    protected getTemplate(): string;
+}
+//# sourceMappingURL=pop-auth-panel.d.ts.map

package/dist/components/pop-auth-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pop-auth-panel.d.ts","sourceRoot":"","sources":["../../src/components/pop-auth-panel.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AAiG7D,qBAAa,YAAa,SAAQ,WAAW;IACvB,SAAS,EAAG,SAAS,CAAC;IAE1C,SAAS,KAAK,WAAW,oBAExB;IAED,SAAS,CAAC,MAAM;;MAEd;IAEF,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,UAAU;IAKnC,SAAS,CAAC,YAAY;YAwBR,UAAU;IAKxB,SAAS,CAAC,WAAW,IAAI,MAAM;CAYhC"}

package/dist/components/pop-comment-avatar.d.ts

@@ -0,0 +1,16 @@
+import { BaseElement } from './base-element.js';
+export declare class PopCommentAvatar extends BaseElement {
+    private _backgroundColor;
+    constructor();
+    static get observedAttributes(): string[];
+    onSizeChanged(): void;
+    onDataColorKeyChanged(): void;
+    onDeletedChanged(): void;
+    protected get styleSheets(): CSSStyleSheet[];
+    get size(): string;
+    set size(value: string);
+    get deleted(): boolean;
+    set deleted(value: boolean);
+    protected getTemplate(): string;
+}
+//# sourceMappingURL=pop-comment-avatar.d.ts.map

package/dist/components/pop-comment-avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pop-comment-avatar.d.ts","sourceRoot":"","sources":["../../src/components/pop-comment-avatar.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AAqG7D,qBAAa,gBAAiB,SAAQ,WAAW;IAC/C,OAAO,CAAC,gBAAgB,CAAS;;IAOjC,MAAM,KAAK,kBAAkB,aAE5B;IAED,aAAa;IAIb,qBAAqB;IAIrB,gBAAgB;IAIhB,SAAS,KAAK,WAAW,oBAExB;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAMzB;IAED,SAAS,CAAC,WAAW,IAAI,MAAM;CA6BhC"}

package/dist/components/pop-comment-bar.d.ts

@@ -0,0 +1,14 @@
+import { GridStore } from '../store/grid-store.js';
+import { BaseElement } from './base-element.js';
+export declare class PopCommentBar extends BaseElement {
+    gridStore: GridStore;
+    protected get styleSheets(): CSSStyleSheet[];
+    protected events: {
+        click: string;
+    };
+    protected onClick(event: MouseEvent): void;
+    protected setupEffects(): void;
+    private handleSend;
+    protected getTemplate(): string;
+}
+//# sourceMappingURL=pop-comment-bar.d.ts.map

package/dist/components/pop-comment-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pop-comment-bar.d.ts","sourceRoot":"","sources":["../../src/components/pop-comment-bar.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AA8H7D,qBAAa,aAAc,SAAQ,WAAW;IACxB,SAAS,EAAG,SAAS,CAAC;IAE1C,SAAS,KAAK,WAAW,oBAExB;IAED,SAAS,CAAC,MAAM;;MAEd;IAEF,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,UAAU;IAKnC,SAAS,CAAC,YAAY;YA8ER,UAAU;IA0BxB,SAAS,CAAC,WAAW,IAAI,MAAM;CAgBhC"}

package/dist/components/pop-comment-icon.d.ts

@@ -0,0 +1,33 @@
+import { BaseElement } from './base-element.js';
+export declare class PopCommentIcon extends BaseElement {
+    protected get styleSheets(): CSSStyleSheet[];
+    static get observedAttributes(): string[];
+    onCounterChanged(): void;
+    onIconUrlChanged(): void;
+    onSizeChanged(): void;
+    onThemeChanged(): void;
+    onVariantChanged(): void;
+    onTypeChanged(): void;
+    onDisabledChanged(): void;
+    get counter(): number;
+    set counter(value: number);
+    get iconUrl(): string | undefined;
+    set iconUrl(value: string | undefined);
+    get size(): string;
+    set size(value: string);
+    get theme(): "brand" | "neutral";
+    set theme(value: "brand" | "neutral");
+    get variant(): "add" | "close" | "filter" | "more" | "send" | "cancel";
+    set variant(value: "add" | "close" | "filter" | "more" | "send" | "cancel");
+    get type(): "button" | "submit" | "reset" | "menu";
+    set type(value: "button" | "submit" | "reset" | "menu");
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    protected events: {
+        click: string;
+    };
+    protected onClick(event: Event): void;
+    get icon(): string;
+    protected getTemplate(): string;
+}
+//# sourceMappingURL=pop-comment-icon.d.ts.map

package/dist/components/pop-comment-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pop-comment-icon.d.ts","sourceRoot":"","sources":["../../src/components/pop-comment-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AA+Q7D,qBAAa,cAAe,SAAQ,WAAW;IAC7C,SAAS,KAAK,WAAW,oBAExB;IAED,MAAM,KAAK,kBAAkB,aAE5B;IAED,gBAAgB;IAIhB,gBAAgB;IAIhB,aAAa;IAIb,cAAc;IAId,gBAAgB;IAIhB,aAAa;IAIb,iBAAiB;IAIjB,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;IAED,IAAI,OAAO,IAAI,MAAM,GAAG,SAAS,CAEhC;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAMpC;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,KAAK,IAAI,OAAO,GAAG,SAAS,CAE/B;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,EAEnC;IAED,IAAI,OAAO,IAAI,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAErE;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,EAEzE;IAED,IAAI,IAAI,IAAI,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAEjD;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,EAErD;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAM1B;IAED,SAAS,CAAC,MAAM;;MAEd;IAEF,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK;IAS9B,IAAI,IAAI,IAAI,MAAM,CA0FjB;IAED,SAAS,CAAC,WAAW,IAAI,MAAM;CA8BhC"}

package/dist/components/pop-comment-input.d.ts

@@ -0,0 +1,19 @@
+import { GridStore } from '../store/grid-store.js';
+import { BaseElement } from './base-element.js';
+export declare class PopCommentInput extends BaseElement {
+    gridStore: GridStore;
+    protected get styleSheets(): CSSStyleSheet[];
+    protected events: {
+        input: string;
+        keydown: string;
+    };
+    protected onInput(event: Event): void;
+    protected onKeyDown(event: KeyboardEvent): void;
+    getValue(): string;
+    setValue(val: string): void;
+    clear(): void;
+    focus(): void;
+    protected setupEffects(): void;
+    protected getTemplate(): string;
+}
+//# sourceMappingURL=pop-comment-input.d.ts.map

package/dist/components/pop-comment-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pop-comment-input.d.ts","sourceRoot":"","sources":["../../src/components/pop-comment-input.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AAiC7D,qBAAa,eAAgB,SAAQ,WAAW;IAC1B,SAAS,EAAG,SAAS,CAAC;IAE1C,SAAS,KAAK,WAAW,oBAExB;IAED,SAAS,CAAC,MAAM;;;MAGd;IAEF,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK;IAM9B,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,aAAa;IAUxC,QAAQ,IAAI,MAAM;IAIlB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAS3B,KAAK,IAAI,IAAI;IAQb,KAAK,IAAI,IAAI;IAIb,SAAS,CAAC,YAAY;IAgBtB,SAAS,CAAC,WAAW,IAAI,MAAM;CAKhC"}

package/dist/components/pop-comment-thread.d.ts

@@ -0,0 +1,14 @@
+import { GridStore } from '../store/grid-store.js';
+import { BaseElement } from './base-element.js';
+export declare class PopCommentThread extends BaseElement {
+    gridStore: GridStore;
+    private _showAll;
+    protected get styleSheets(): CSSStyleSheet[];
+    protected events: {
+        click: string;
+    };
+    protected onClick(event: MouseEvent): void;
+    protected setupEffects(): void;
+    protected getTemplate(): string;
+}
+//# sourceMappingURL=pop-comment-thread.d.ts.map

package/dist/components/pop-comment-thread.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pop-comment-thread.d.ts","sourceRoot":"","sources":["../../src/components/pop-comment-thread.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AA+D7D,qBAAa,gBAAiB,SAAQ,WAAW;IAC3B,SAAS,EAAG,SAAS,CAAC;IAE1C,OAAO,CAAC,QAAQ,CAAS;IAEzB,SAAS,KAAK,WAAW,oBAExB;IAED,SAAS,CAAC,MAAM;;MAEd;IAEF,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,UAAU;IAMnC,SAAS,CAAC,YAAY;IAgBtB,SAAS,CAAC,WAAW,IAAI,MAAM;CAsChC"}

package/dist/components/pop-comment.d.ts

@@ -0,0 +1,32 @@
+import { GridStore } from '../store/grid-store.js';
+import { BaseElement } from './base-element.js';
+export declare class PopComment extends BaseElement {
+    gridStore: GridStore;
+    static get observedAttributes(): string[];
+    onDataSizeChanged(): void;
+    onCommentIdChanged(): void;
+    get size(): "sm" | "lg";
+    get commentAvatarSize(): "xs" | "sm";
+    protected get styleSheets(): CSSStyleSheet[];
+    protected events: {
+        click: string;
+    };
+    private _expanded;
+    private _dropdownOpen;
+    private _floatingCleanup?;
+    private _onOutsideClick;
+    private toggleDropdown;
+    private openDropdown;
+    private closeDropdown;
+    private deleteComment;
+    private flagComment;
+    protected onClick(event: Event): void;
+    private expandText;
+    private _timeUpdateTimer;
+    disconnectedCallback(): void;
+    private startTimeUpdates;
+    private stopTimeUpdates;
+    protected setupEffects(): void;
+    protected getTemplate(): string;
+}
+//# sourceMappingURL=pop-comment.d.ts.map

package/dist/components/pop-comment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pop-comment.d.ts","sourceRoot":"","sources":["../../src/components/pop-comment.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AAyS7D,qBAAa,UAAW,SAAQ,WAAW;IACrB,SAAS,EAAG,SAAS,CAAC;IAE1C,MAAM,KAAK,kBAAkB,aAE5B;IAED,iBAAiB;IAIjB,kBAAkB;IAIlB,IAAI,IAAI,IAAI,IAAI,GAAG,IAAI,CAEtB;IAED,IAAI,iBAAiB,IAAI,IAAI,GAAG,IAAI,CAEnC;IAED,SAAS,KAAK,WAAW,oBAExB;IAED,SAAS,CAAC,MAAM;;MAEd;IAEF,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,gBAAgB,CAAC,CAAa;IAEtC,OAAO,CAAC,eAAe,CAQrB;IAEF,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IA2BpB,OAAO,CAAC,aAAa;YAaP,aAAa;YASb,WAAW;IAYzB,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK;IAoD9B,OAAO,CAAC,UAAU;IA4BlB,OAAO,CAAC,gBAAgB,CAA8C;IAEtE,oBAAoB;IAMpB,OAAO,CAAC,gBAAgB;IA0CxB,OAAO,CAAC,eAAe;IAOvB,SAAS,CAAC,YAAY;IA8BtB,SAAS,CAAC,WAAW,IAAI,MAAM;CAoHhC"}

package/dist/components/pop-feed.d.ts

@@ -0,0 +1,17 @@
+import { GridStore } from '../store/grid-store.js';
+import { BaseElement } from './base-element.js';
+export declare class PopFeed extends BaseElement {
+    gridStore: GridStore;
+    private _footerChild;
+    private _wasOpen;
+    protected get styleSheets(): CSSStyleSheet[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+    private onOutsideClick;
+    private onKeyDown;
+    protected setupEffects(): void;
+    private update;
+    protected getTemplate(): string;
+}
+//# sourceMappingURL=pop-feed.d.ts.map

package/dist/components/pop-feed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pop-feed.d.ts","sourceRoot":"","sources":["../../src/components/pop-feed.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AAyH7D,qBAAa,OAAQ,SAAQ,WAAW;IAClB,SAAS,EAAG,SAAS,CAAC;IAE1C,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,QAAQ,CAAS;IAEzB,SAAS,KAAK,WAAW,oBAExB;IAED,iBAAiB;IAMjB,oBAAoB;IAMpB,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAc/B,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,SAAS;IAKjB,SAAS,CAAC,YAAY;IAatB,OAAO,CAAC,MAAM;IA8Cd,SAAS,CAAC,WAAW,IAAI,MAAM;CAUhC"}

package/dist/components/pop-grid.d.ts

@@ -0,0 +1,12 @@
+import { BaseElement } from './base-element.js';
+export declare class PopGrid extends BaseElement {
+    private _initialized;
+    private _floatingCleanup?;
+    private _store;
+    protected get styleSheets(): CSSStyleSheet[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected setupEffects(): void;
+    protected getTemplate(): string;
+}
+//# sourceMappingURL=pop-grid.d.ts.map

package/dist/components/pop-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pop-grid.d.ts","sourceRoot":"","sources":["../../src/components/pop-grid.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AA4B7D,qBAAa,OAAQ,SAAQ,WAAW;IACtC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,gBAAgB,CAAC,CAAa;IACtC,OAAO,CAAC,MAAM,CAAa;IAE3B,SAAS,KAAK,WAAW,oBAExB;IAED,iBAAiB;IAiCjB,oBAAoB;IAOpB,SAAS,CAAC,YAAY;IAuFtB,SAAS,CAAC,WAAW,IAAI,MAAM;CAQhC"}

package/dist/components/pop-widget.d.ts

@@ -0,0 +1,13 @@
+import { GridStore } from '../store/grid-store.js';
+import { BaseElement } from './base-element.js';
+export declare class PopWidget extends BaseElement {
+    gridStore: GridStore;
+    protected get styleSheets(): CSSStyleSheet[];
+    protected events: {
+        click: string;
+    };
+    protected onClick(): void;
+    protected setupEffects(): void;
+    protected getTemplate(): string;
+}
+//# sourceMappingURL=pop-widget.d.ts.map

package/dist/components/pop-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pop-widget.d.ts","sourceRoot":"","sources":["../../src/components/pop-widget.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AAyI7D,qBAAa,SAAU,SAAQ,WAAW;IACpB,SAAS,EAAG,SAAS,CAAC;IAE1C,SAAS,KAAK,WAAW,oBAExB;IAED,SAAS,CAAC,MAAM;;MAEd;IAEF,SAAS,CAAC,OAAO;IAQjB,SAAS,CAAC,YAAY;IAmBtB,SAAS,CAAC,WAAW,IAAI,MAAM;CA2ChC"}