@livelike/custom-kit 0.0.0-stage → 1.0.0

package/dist/loader.d.ts

@@ -0,0 +1 @@
+export declare function LiveLikeInit(options?: any): Promise<any>;

package/dist/utils/gated.d.ts

@@ -0,0 +1,2 @@
+export declare const getWidgetAttribute: (payload: any, key: string) => string | null;
+export declare function renderDescription(payload: any): any;

package/dist/utils/inject-styles.d.ts

@@ -0,0 +1,2 @@
+/** Injects a component's CSS once, along with the package's @font-face rules (font.css). */
+export declare function injectStyles(id: string, css: string): void;

package/dist/utils/svgs.d.ts

@@ -0,0 +1,5 @@
+export declare const info: any;
+export declare const attLogo: any;
+export declare const football: any;
+export declare const checkCircle: any;
+export declare const closeCircle: any;

package/dist/utils/vote-submit.d.ts

@@ -0,0 +1,7 @@
+type Opts = {
+    countKey: string;
+    urlKey: string;
+    payloadField: "options" | "choices";
+};
+export declare function reconcileInteractions(widget: any, items: any[], chosenId: string, opts: Opts, onUpdate: (items: any[]) => void): Promise<void>;
+export {};

package/package.json

@@ -1,6 +1,28 @@
 {
   "name": "@livelike/custom-kit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "main": "dist/livelike.umd.cjs",
+  "module": "dist/livelike.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite"
+  },
+  "peerDependencies": {
+    "@livelike/engagementsdk": "^2.59.0"
+  },
+  "devDependencies": {
+    "vite-plugin-dts": "^5.0.3",
+    "vite": "^7.2.4"
+  },
+  "dependencies": {
+    "lit": "^3.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/readme.md

@@ -0,0 +1,118 @@
+# Widget Elements
+
+LiveLike custom widget elements (Web Components).
+ships one widget: `<image-poll>`.
+
+## Install
+
+```bash
+npm install @livelike/custom-kit
+```
+
+`@livelike/engagementsdk` is a peer dependency and must be installed by the host
+app.
+
+## Usage
+
+The widget fetches its data when it's added to the page, so **initialize the
+SDK first, then render the widget.**
+
+```js
+import * as LiveLike from "@livelike/custom-kit";
+
+await LiveLike.LiveLikeInit({
+  clientId: "**************",
+  accessToken: "**************", // optional; omit for an anonymous viewer
+});
+
+const poll = document.createElement("image-poll");
+poll.setAttribute("widgetid", "**************");
+document.body.appendChild(poll);
+```
+
+- Importing the package registers `<image-poll>` and exposes `LiveLikeInit`.
+- Styles and fonts are injected automatically on import; there is no separate
+  CSS import.
+- ⚠️ The widget must not be in the DOM before `LiveLikeInit()` resolves.
+
+## Image Poll
+
+```html
+<image-poll widgetid="***************"></image-poll>
+```
+
+`widgetid` is the only HTML attribute. Everything else is set on the widget in
+LiveLike:
+
+- **Header title:** the widget's question.
+- **Hero image:** the widget's sponsor logo.
+- **Option name and photo:** each option's description and image.
+- **Voting close time:** the widget's `interactive_until`.
+- **Everything else:** [widget attributes](#widget-attributes).
+
+### States
+
+1. **Before voting opens:** the banner reads "Voting opens soon" and options
+   can't be picked.
+2. **Voting open:** the banner counts down ("Voting closes in 2 Hrs 13 Mins").
+   The viewer picks an option and presses **Choose player**.
+3. **Vote submitted:** a "Voting submitted!" popup appears.
+   - **×** closes it, and the button reads "Vote successful".
+   - **Vote again** reopens the options. Submitting again changes the existing
+     vote rather than adding a second one.
+   - **Watch highlights** opens `highlights_url` in a new tab.
+4. **Voting closed:** the banner reads "Voting closed", the hero is replaced by
+   a "Voting closed: the whistle has blown!" banner, options are dimmed, and
+   there's no button.
+
+In any state:
+
+- Percentages appear on every option once `polling_result_time` passes.
+- The **ⓘ** icon in the header opens an info popup with `info_title` and
+  `info_text`. It closes with **×** or by clicking outside it.
+
+## Widget attributes
+
+Widget attributes are `{ key, value }` pairs set on the widget in LiveLike
+(`widget_attributes` in the payload). All are optional.
+
+- **Keys are case-sensitive and not validated.** A typo is silently ignored and
+  the default applies.
+- **Times are ISO 8601 UTC strings**, e.g. `2026-10-13T10:17:00Z`. An
+  unparseable value is treated as missing.
+
+| Key | Value | What it does | If missing |
+| --- | --- | --- | --- |
+| `club_option_{n}` | Text | Club name under option `n`. **1-based:** `club_option_1` is the first option. | No club name |
+| `description` | Text | Supporting line under the hero image. | Nothing shown. |
+| `polling_starts_time` | ISO date-time | When voting opens. | Voting is open immediately. |
+| `polling_result_time` | ISO date-time | When vote percentages appear. Independent of the open/close times. | Percentages are never shown. |
+| `highlights_url` | URL | "Watch highlights" link in the "Voting submitted!" popup. | Link is hidden. |
+| `info_title` | Text | Title of the info popup. | "How it works" |
+| `info_text` | Text | Body of the info popup. | Default voting instructions. |
+
+A widget left open on screen updates itself at each of these times, so viewers
+don't need to reload. When percentages are revealed, it fetches fresh vote
+counts.
+
+### Example
+
+```json
+"widget_attributes": [
+  { "key": "club_option_1", "value": "Inter Miami CF" },
+  { "key": "club_option_2", "value": "LA Galaxy" },
+  { "key": "polling_starts_time", "value": "2026-10-10T12:00:00Z" },
+  { "key": "polling_result_time", "value": "2026-10-14T06:00:00Z" },
+  { "key": "highlights_url", "value": "https://www.mlssoccer.com/video" },
+  { "key": "info_title", "value": "Player of the Match" },
+  { "key": "info_text", "value": "Vote for your standout player. You can change your vote until voting closes." }
+]
+```
+
+## Development
+
+```bash
+npm install
+npm run dev          # local dev server
+npm run build        # build to dist/ (es + umd + types)
+```

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.