@jchat/addon-sdk 1.0.0-alpha.11 → 1.0.0-alpha.12

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @jchat/addon-sdk
 
+## 1.0.0-alpha.12
+
+### Patch Changes
+
+- 3d4d0ad: - Add interactive terminal UI powered by `@clack/prompts` with automatic TTY detection and positional argument support
+  - Add full-stack addon template scaffolding with Elysia API router, Kysely database schema, SQL migrations, and custom permission definitions
+  - Add multi-mountpoint support with dynamic UI rendering and directional RTL/LTR styles
+  - Expand locale scaffolding to all 20 host languages with 100% key parity and automated synchronization testing
+  - Strongly type `MountPoint` and `MOUNT_POINTS` contracts across generator and CLI interfaces
+  - Bundle contracts inline in `@jchat/create-addon` for standalone, zero-dependency CLI execution
+  - Export `./contracts` subpath from `@jchat/addon-sdk` for lightweight, framework-agnostic contract imports
+- 7b86222: Add official customer-facing Agent Skills for JChat addon development and creation. Bundles `@jchat/addon-sdk` skills (`jchat-addon-development` and `create-jchat-addon`) for AI coding assistants and automatically scaffolds in-workspace skills when creating new addon projects.
+- c5fa55f: Support direct icon imports via `@jchat/addon-sdk/icon` and align icon packs with canonical Lucide icon definitions. Addons can now import `Icons` directly without requiring hook invocation (`useIcons`), while maintaining backward compatibility for existing addons.
+- 27efa80: - Update third-party developer guide in README with complete quick start, architecture specifications, hook references, and mount points
+  - Include `LICENSE` file in published npm package distribution
+  - Update license badge and terms references to link to official public web address (`https://jchatlive.com/terms`)
+
 ## 1.0.0-alpha.11
 
 ## 1.0.0-alpha.10

package/README.md

@@ -1,63 +1,256 @@
 # @jchat/addon-sdk
 
-Official TypeScript SDK for developing extensions, UI widgets, and server plugins for the [JChat](https://jchat.im) platform.
+Official TypeScript SDK for developing extensions, UI widgets, and server plugins for the [JChat](https://jchatlive.com) communication platform.
 
 Provides typed interfaces, manifest contracts, Vite bundler plugins, and CLI development tooling for building sandboxed JChat addons.
 
+[![npm version](https://img.shields.io/npm/v/@jchat/addon-sdk.svg)](https://www.npmjs.com/package/@jchat/addon-sdk)
+[![License](https://img.shields.io/badge/license-Proprietary-blue.svg)](https://jchatlive.com/terms)
+
 ---
 
-## Installation
+## Architecture Overview
 
-```bash
-bun add -d @jchat/addon-sdk
-```
+JChat addons are **sandboxed, modular extensions** designed to enhance real-time chats without modifying core database schemas or server code.
 
-> **Note**: `@jchat/addon-sdk` is an externalized build dependency. The JChat host runtime automatically provides shared externals (React, UI primitives, Kysely, and context objects) at load time.
+- **Ultra-Lightweight Server Bundles**: Elysia and TypeBox are externalized and provided directly by the host server runtime via `ctx.t` and `app`. Server bundles (`build/api.js`) compile down to just **2–7 KB**.
+- **Zero Frontend Bundle Bloat**: Host externals (`react`, `react-dom`, `@jchat/ui`, `@jchat/icon`, `@tanstack/react-query`, `jotai`) are injected at runtime by the JChat host application.
+- **Isolated Database Schema**: Addon tables reside exclusively in the isolated `addons` PostgreSQL schema (e.g. `addons.GlimpseStories`), preventing collisions with core chat tables.
+- **Scoped Cache & Real-Time Events**: Addons receive namespaced Redis cache (`addon:<id>:<key>`) and real-time WebSocket event broadcasting scoped to sites, rooms, or users.
+- **20-Language i18n Standard**: First-class internationalization with 100% parity across all 20 supported host languages, including full RTL direction support.
 
 ---
 
 ## Requirements
 
-- **Bun**: 1.4.0+
-- **React**: 18+ / 19+
-- **Vite**: 5+ / 6+
+- **Bun**: `1.4.0+`
+- **React**: `19+`
+- **Vite**: `8+`
 
 ---
 
-## Quick Start
+## Installation
 
-### 1. Define Addon Manifest
+Install as a development dependency:
 
-Create `src/manifest.ts` with metadata, permissions, mount points, and compatibility ranges:
+```bash
+bun add -d @jchat/addon-sdk
+```
+
+Or scaffold a new addon instantly with the official CLI:
+
+```bash
+bun create @jchat/addon my-new-addon
+```
+
+---
+
+## Quick Start Guide
+
+### 1. Define the Addon Manifest (`src/manifest.ts`)
+
+Use `defineAddonManifest` (or type with `AddonManifest`) to declare metadata, permissions, mount points, and supported languages:
 
 ```ts
-import type { AddonManifest } from "@jchat/addon-sdk"
+import { defineAddonManifest } from "@jchat/addon-sdk"
 
-const manifest: AddonManifest = {
-  id: "my-addon",
-  name: "My Addon",
+export default defineAddonManifest({
+  id: "gifyard",
+  name: "Gifyard GIF Picker",
   version: "1.0.0",
-  description: "Custom feature extension for JChat",
-  author: "Developer",
+  description: "Search and insert animated GIFs directly into chat messages.",
+  author: "JChat Ecosystem Team",
+  publisher: { id: "jchat" },
   compatibility: {
     jchat: ">=1.0.0-alpha.0 <2.0.0",
-    addonSdk: ">=1.0.0-alpha.0 <2.0.0"
+    addonSdk: "^1.0.0"
   },
-  locales: ["en", "es", "fr", "de", "ar"],
+  locales: [
+    "ar",
+    "bg",
+    "de",
+    "el",
+    "en",
+    "es",
+    "fr",
+    "he",
+    "hi",
+    "hr",
+    "kn",
+    "ml",
+    "nl",
+    "pt",
+    "ro",
+    "ru",
+    "ta",
+    "te",
+    "tr",
+    "ur"
+  ],
   defaultLocale: "en",
   frontend: {
     bundle: "./ui.js",
-    mountPoints: ["chat-toolbar", "room-settings"]
+    mountPoints: ["chat-toolbar", "emoji-picker-gif-tab", "addon-settings"]
+  },
+  server: {
+    bundle: "./api.ts",
+    migrations: ["./migrations/0001_init.sql"]
   },
-  permissions: []
+  accessPermission: "addon.gifyard.view",
+  permissions: ["addon.gifyard.view", "addon.gifyard.manage"],
+  permissionDefinitions: [
+    {
+      name: "addon.gifyard.view",
+      label: "View GIFs",
+      description: "Search and preview animated GIFs in chat"
+    },
+    {
+      name: "addon.gifyard.manage",
+      label: "Manage Gifyard",
+      description: "Configure Giphy API keys and content rating settings"
+    }
+  ]
+})
+```
+
+---
+
+### 2. Build the Frontend UI (`src/ui.tsx`)
+
+Addon UI components receive typed `AddonProps` and access host services via the `useAddonSDK()` hook:
+
+```tsx
+import { useAddonSDK, useAddonQuery, useTranslation, type AddonProps } from "@jchat/addon-sdk"
+import Icons from "@jchat/addon-sdk/icon"
+import locales from "./locales"
+
+export default function MyAddon({ mountPoint, roomId }: AddonProps) {
+  const sdk = useAddonSDK()
+  const { t, dir } = useTranslation(locales)
+
+  // Type-safe data fetching via TanStack Query bridge
+  const { data, isLoading } = useAddonQuery<{ items: string[] }>({
+    path: "/items",
+    queryKey: [roomId]
+  })
+
+  const handleInsert = (text: string) => {
+    // Insert rich content directly into the active Slate message editor
+    sdk.editor.dispatchCommand("INSERT_TEXT", text)
+    sdk.toast(t("item_inserted"), "success")
+  }
+
+  return (
+    <div dir={dir} className="rounded-2xl border border-border bg-card p-4 shadow-sm">
+      <div className="flex items-center gap-2 font-bold">
+        <Icons.Sparkles className="size-4 text-primary" />
+        <span>{t("addon_title")}</span>
+      </div>
+      {isLoading ? (
+        <p className="text-xs text-muted-foreground">{t("loading")}</p>
+      ) : (
+        <button
+          onClick={() => handleInsert("Hello from Addon!")}
+          className="mt-3 rounded-lg bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground"
+        >
+          {t("insert_action")}
+        </button>
+      )}
+    </div>
+  )
 }
+```
+
+> **Directional Styling Rule**: Always use Tailwind logical directional properties (`ps-*`, `pe-*`, `ms-*`, `me-*`, `text-start`, `text-end`, `start-*`, `end-*`) to automatically adapt to RTL languages (`ar`, `he`, `ur`).
+
+---
+
+### 3. Build the Backend API (`src/api.ts`)
+
+Define type-safe Elysia API endpoints. The schema validator `t` is injected directly via `ctx.t`, so your production bundle never imports or bundles Elysia:
 
-export default manifest
+```ts
+import type { AddonApp, AddonServerContext } from "@jchat/addon-sdk"
+
+export interface MyAddonDatabase {
+  addon_items: {
+    id: string
+    siteId: string
+    roomId: string
+    userId: string
+    title: string
+    createdAt: Date
+  }
+}
+
+export default (
+  { db, t, emit, cache, getConfig, getUser, hasPermission }: AddonServerContext<MyAddonDatabase>,
+  app: AddonApp
+) => {
+  return app
+    .get(
+      "/items",
+      async ({ query, user }) => {
+        const siteId = user?.siteId ?? ""
+        const items = await db
+          .selectFrom("addon_items")
+          .where("siteId", "=", siteId)
+          .where("roomId", "=", query.roomId ?? "")
+          .orderBy("createdAt", "desc")
+          .limit(20)
+          .selectAll()
+          .execute()
+
+        return { items }
+      },
+      {
+        requirePermission: "addon.myaddon.view",
+        query: t.Object({
+          roomId: t.Optional(t.String())
+        })
+      }
+    )
+    .post(
+      "/items",
+      async ({ body, user, status }) => {
+        if (!user) {
+          return status(401, { error: "Authentication required" })
+        }
+
+        const id = Bun.randomUUIDv7()
+        await db
+          .insertInto("addon_items")
+          .values({
+            id,
+            siteId: user.siteId!,
+            roomId: body.roomId,
+            userId: user.id,
+            title: body.title,
+            createdAt: new Date()
+          })
+          .execute()
+
+        // Broadcast real-time WebSocket event
+        await emit("addon:myaddon:item-created", { id, title: body.title }, { roomId: body.roomId })
+
+        return { id, title: body.title }
+      },
+      {
+        requirePermission: "addon.myaddon.manage",
+        body: t.Object({
+          roomId: t.String(),
+          title: t.String({ minLength: 1 })
+        })
+      }
+    )
+}
 ```
 
-### 2. Configure Vite Plugin
+---
+
+### 4. Configure Vite Bundling (`vite.config.ts`)
 
-In `vite.config.ts`, include the official JChat addon plugin:
+Include the official Vite plugin for automatic manifest bundling, externalization, and live development:
 
 ```ts
 import { defineConfig } from "vite"
@@ -68,65 +261,150 @@ export default defineConfig({
 })
 ```
 
-### 3. Build & Package Addon
+---
 
-Use the built-in CLI to build, test, and bundle distribution packages:
+## SDK Modules & API Reference
 
-```bash
-# Build addon bundle and generate distribution zip
-bun run jchat-addon build --zip
+### 1. Host Bridge: `useAddonSDK()`
 
-# Start live development watcher
-bun run jchat-addon dev
-```
+Provides access to the active JChat host application bridge:
+
+| Property         | Type               | Description                                                                                                    |
+| :--------------- | :----------------- | :------------------------------------------------------------------------------------------------------------- |
+| `api`            | `AddonApi`         | Authenticated HTTP client (`get`, `post`, `put`, `delete`) automatically scoped to `/api/v1/addons/<addonId>`. |
+| `settings`       | `AddonSettingsApi` | First-class configuration helper to load and save addon settings (`get()`, `save()`).                          |
+| `editor`         | `AddonEditorApi`   | Active Slate editor controls (`dispatchCommand`, `insertNode`, `addAttachment`, `focus`).                      |
+| `events`         | `AddonEventBus`    | Real-time WebSocket event listeners (`on`, `off`).                                                             |
+| `toast`          | `function`         | Display host toast notifications (`default`, `success`, `error`).                                              |
+| `navigate`       | `function`         | Navigate to internal host routes without triggering a full page reload.                                        |
+| `supportedFonts` | `AddonFont[]`      | List of fonts configured by the site administrator with scale multipliers.                                     |
+| `locale`         | `string`           | Active user locale code (e.g. `'en'`, `'ta'`, `'ar'`).                                                         |
+| `dir`            | `'ltr' \| 'rtl'`   | Current layout text direction.                                                                                 |
 
 ---
 
-## Database Architecture & Isolated Persistence
+### 2. Data Fetching: `@jchat/addon-sdk/query`
 
-For addons requiring persistence, JChat provides zero-overhead, type-safe database queries via **Kysely**:
+Integrated TanStack Query wrappers pre-configured with host caching, auto-invalidation, and credentials:
 
-- **Zero Bundle Overhead**: Define tables as pure TypeScript interfaces (`src/db.ts`) with no ORM runtime footprint.
-- **Isolated `addons` Schema**: All addon tables reside in the dedicated `"addons"` schema (e.g. `addons.MyAddonSettings`, `addons.GlimpseStories`), preventing collision with core application tables.
-- **Table Naming Standard**: Table names must begin with a capital letter and start with your capitalized addon ID (e.g., `MyAddonItems`).
-- **SQL Migrations**: Store migration scripts as standard SQL files under `migrations/` referenced in your manifest.
+- **`useAddonQuery({ path, queryKey, ...options })`**: Cached GET requests automatically prefixed with `/api/v1/addons/<addonId>`.
+- **`useAddonMutation({ path, method, invalidateQueries, ...options })`**: Declarative mutations with automatic query invalidation.
+- **`useAddonInfiniteQuery({ path, queryKey, initialPageParam, getNextPageParam })`**: Paginated and infinite-scroll queries.
+- **`useQueryClient()`**: Access the underlying TanStack Query client.
 
-```ts
-import type { AddonServerContext } from "@jchat/addon-sdk"
+---
 
-export interface MyAddonDatabase {
-  MyAddonSettings: {
-    id: string
-    siteId: string
-    enabled: boolean
-    createdAt: Date
-  }
-}
+### 3. Atomic State: `@jchat/addon-sdk/state`
+
+Re-exports Jotai state management primitives for maintaining synchronized, reactive UI state across multiple mount points:
 
-export type MyAddonContext = AddonServerContext<MyAddonDatabase>
+```tsx
+import { atom, useAtom, useAtomValue, useSetAtom } from "@jchat/addon-sdk/state"
+
+export const activeTabAtom = atom<"trending" | "search">("trending")
 ```
 
 ---
 
-## UI Mount Points & Lifecycle
+### 4. Localization: `useTranslation()` & `useLocale()`
 
-Addon UI components receive a structured `AddonProps` object containing user, room, localization, and host bridge APIs:
+Addons must support all **20 host languages**:
+`ar`, `bg`, `de`, `el`, `en`, `es`, `fr`, `he`, `hi`, `hr`, `kn`, `ml`, `nl`, `pt`, `ro`, `ru`, `ta`, `te`, `tr`, `ur`.
 
 ```tsx
-import type { AddonProps } from "@jchat/addon-sdk"
+import { useTranslation, useLocale } from "@jchat/addon-sdk"
+import locales from "./locales"
 
-export default function MyAddonComponent({ context, t }: AddonProps) {
-  return (
-    <div className="p-4 rounded-lg bg-card text-card-foreground border shadow-sm">
-      <h3 className="font-semibold">{t("my_addon_title")}</h3>
-      <p className="text-sm text-muted-foreground">{context.siteId}</p>
-    </div>
-  )
+export default function MyComponent() {
+  const { t, dir, isRtl, locale } = useTranslation(locales)
+  return <div dir={dir}>{t("welcome", { name: "User" })}</div>
 }
 ```
 
+For backend server routes (`src/api.ts`), use `createTranslator(locales, defaultLocale)` to translate server-sent notifications or messages.
+
+---
+
+### 5. Icons: `@jchat/addon-sdk/icon`
+
+Imports the site's active icon pack directly, ensuring visual consistency with the host theme:
+
+```tsx
+import Icons from "@jchat/addon-sdk/icon"
+
+;<Icons.Heart className="size-4 text-red-500" />
+```
+
+---
+
+### 6. Server Context: `AddonServerContext`
+
+The context passed to your server plugin (`src/api.ts`):
+
+| Property        | Type                   | Description                                                                               |
+| :-------------- | :--------------------- | :---------------------------------------------------------------------------------------- |
+| `t`             | `typeof t`             | Elysia / TypeBox schema validator for defining `body`, `query`, `params`, and `headers`.  |
+| `db`            | `AddonDatabase<T>`     | Schema-scoped Kysely query builder (`selectFrom`, `insertInto`, `updateTable`, etc.).     |
+| `cache`         | `AddonCacheClient`     | Namespaced Redis client (`get`, `set`, `del`, `incr`, `expire`, `ttl`).                   |
+| `emit`          | `function`             | Real-time WebSocket event broadcaster with target options (`siteId`, `roomId`, `userId`). |
+| `getConfig`     | `(siteId) => Promise`  | Retrieve encrypted site configuration with automatic decryption.                          |
+| `getUser`       | `(userId) => Promise`  | Fetch a single user's public profile (`id`, `name`, `displayName`, `avatar`, `gender`).   |
+| `getUsers`      | `(userIds) => Promise` | Batch-fetch multiple user profiles in a single query.                                     |
+| `hasPermission` | `(user, perm) => bool` | Check whether a request user holds a given permission scope.                              |
+
+---
+
+## Supported UI Mount Points
+
+Addons can mount into any combination of locations defined in `MOUNT_POINTS`:
+
+| Mount Point              | Identifier                 | Description                                                                     |
+| :----------------------- | :------------------------- | :------------------------------------------------------------------------------ |
+| **Chat Toolbar**         | `chat-toolbar`             | Action button rendered in the message composer toolbar.                         |
+| **Chat Plus Menu**       | `chat-plus-menu`           | Action item inside the message composer (+) expandable menu.                    |
+| **Chat Sidebar**         | `chat-sidebar`             | Dedicated right-hand collapsible panel in active chat rooms.                    |
+| **Chat Header**          | `chat-header`              | Action button or widget rendered in the chat room top header.                   |
+| **Sidebar Top**          | `sidebar-top`              | Placed at the top of the left-hand navigation sidebar.                          |
+| **Sidebar Bottom**       | `sidebar-bottom`           | Placed at the bottom of the left-hand navigation sidebar (e.g. AdSense banner). |
+| **User Popover Actions** | `user-popover-actions`     | Custom action buttons in the user profile card popup.                           |
+| **Message Context Menu** | `message-context-menu`     | Custom actions on right-clicking or long-pressing a message.                    |
+| **Message Feed Overlay** | `message-feed-overlay`     | Floating banner or widget overlaid across the message stream.                   |
+| **GIF Picker Tab**       | `emoji-picker-gif-tab`     | Custom GIF provider tab in the emoji/media drawer.                              |
+| **Sticker Picker Tab**   | `emoji-picker-sticker-tab` | Custom sticker provider tab in the emoji/media drawer.                          |
+| **Addon Settings**       | `addon-settings`           | Configuration panel inside the Site Admin Dashboard.                            |
+| **Owner Settings**       | `owner-settings`           | Global configuration panel inside the System Owner Dashboard.                   |
+
+---
+
+## CLI Development Workflow
+
+The SDK provides the `jchat-addon` CLI for local development, building, and validation:
+
+```bash
+# Start live development watcher with hot module reloading
+bun run dev
+
+# Run TypeScript typechecks
+bun run typecheck
+
+# Execute local unit and contract tests
+bun test
+
+# Build production bundles (build/ui.js and build/api.js)
+bun run build
+```
+
+---
+
+## Publishing to JChat Marketplace
+
+1. Build your addon package: `bun run build`.
+2. Ensure all 20 translation files pass validation: `bun test`.
+3. Package your addon distribution archive.
+4. Sign in to the **[JChat Store Developer Portal](https://jchatlive.com/addons)** and submit your addon package for certified distribution.
+
 ---
 
 ## License
 
-Proprietary — All rights reserved. See the [LICENSE](./LICENSE) file included in this package for full terms and conditions.
+Proprietary — All rights reserved. See the [Commercial EULA & Licensing Terms](https://jchatlive.com/terms) for full details.

package/dist/cli.d.mts

@@ -1,8 +1,8 @@
-import { t as AddonManifest } from "./contracts.mjs";
+import { AddonManifest } from "./contracts.mjs";
 import { InlineConfig } from "vite";
 //#region src/cli.d.ts
 /** Options for resolving addon build configuration. */
-interface AddonCliOptions {
+export interface AddonCliOptions {
   rootDir?: string;
   command?: "build" | "dev" | "help";
   mode?: "production" | "development";
@@ -17,7 +17,7 @@ interface AddonCliOptions {
  * @param rootDir - Root directory of the addon workspace.
  * @returns Parsed {@link AddonManifest}.
  */
-declare function loadAddonManifest(rootDir: string): Promise<AddonManifest>;
+export declare function loadAddonManifest(rootDir: string): Promise<AddonManifest>;
 /**
  * Resolves the full Vite configuration for building a JChat addon, merging user custom configs if
  * present.
@@ -25,12 +25,11 @@ declare function loadAddonManifest(rootDir: string): Promise<AddonManifest>;
  * @param options - CLI build options.
  * @returns Fully merged {@link InlineConfig} for Vite.
  */
-declare function resolveAddonBuildConfig(options?: AddonCliOptions): Promise<InlineConfig>;
+export declare function resolveAddonBuildConfig(options?: AddonCliOptions): Promise<InlineConfig>;
 /**
  * Main CLI handler for `jchat-addon`.
  *
  * @param args - CLI arguments (defaults to `process.argv.slice(2)`).
  */
-declare function runAddonCli(args?: string[]): Promise<void>;
-//#endregion
-export { AddonCliOptions, loadAddonManifest, resolveAddonBuildConfig, runAddonCli };
+export declare function runAddonCli(args?: string[]): Promise<void>;
+//#endregion

package/dist/cli.mjs

@@ -120,12 +120,13 @@ Options:
 `);
 		return;
 	}
-	await build(await resolveAddonBuildConfig({
+	const config = await resolveAddonBuildConfig({
 		command,
 		mode,
 		watch,
 		zip
-	}));
+	});
+	await build(config);
 }
 if (import.meta.main) runAddonCli().catch((error) => {
 	console.error("❌ Addon build failed:", error);

package/dist/contracts.d.mts

@@ -1,6 +1,6 @@
 //#region src/contracts.d.ts
 /** Definition of a custom permission introduced by an addon. */
-interface AddonPermissionDefinition {
+export interface AddonPermissionDefinition {
   /** Permission identifier (recommended: `addon.<id>.<action>`) */
   name: string;
   /** Short, human-readable name for the permission */
@@ -9,7 +9,7 @@ interface AddonPermissionDefinition {
   description: string;
 }
 /** Valid locations where an addon can be rendered within the Jchat layout. */
-declare const MOUNT_POINTS: {
+export declare const MOUNT_POINTS: {
   /** Top of the main chat column */
   readonly CHAT_HEADER: "chat-header";
   /** Below the main chat header, above messages */
@@ -44,12 +44,12 @@ declare const MOUNT_POINTS: {
   readonly ADDON_SETTINGS: "addon-settings";
 };
 /** Union type of all valid addon mount points. */
-type MountPoint = (typeof MOUNT_POINTS)[keyof typeof MOUNT_POINTS];
+export type MountPoint = (typeof MOUNT_POINTS)[keyof typeof MOUNT_POINTS];
 /**
  * The `manifest.json` schema required for every Jchat addon. This file describes how the addon is
  * identified and mounted.
  */
-interface AddonManifest {
+export interface AddonManifest {
   /** Unique kebab-case addon identifier (must match the folder name) */
   id: string;
   /** Human-readable addon name */
@@ -118,5 +118,4 @@ interface AddonManifest {
   /** Custom permissions that should be registered with the host application on installation */
   permissionDefinitions?: AddonPermissionDefinition[];
 }
-//#endregion
-export { MountPoint as i, AddonPermissionDefinition as n, MOUNT_POINTS as r, AddonManifest as t };
+//#endregion

package/dist/contracts.mjs

@@ -0,0 +1,38 @@
+//#region src/contracts.ts
+/** Valid locations where an addon can be rendered within the Jchat layout. */
+const MOUNT_POINTS = {
+	/** Top of the main chat column */
+	CHAT_HEADER: "chat-header",
+	/** Below the main chat header, above messages */
+	CHAT_TOOLBAR: "chat-toolbar",
+	/** The persistent right-side sidebar */
+	CHAT_SIDEBAR: "chat-sidebar",
+	/** Top of the left sidebar (room list) */
+	SIDEBAR_TOP: "sidebar-top",
+	/** Bottom of the left sidebar */
+	SIDEBAR_BOTTOM: "sidebar-bottom",
+	/** Action list shown when clicking a user's avatar */
+	USER_POPOVER_ACTIONS: "user-popover-actions",
+	/** Menu shown when right-clicking a message */
+	MESSAGE_CONTEXT_MENU: "message-context-menu",
+	/** Floating overlay rendered on top of the message stream */
+	MESSAGE_FEED_OVERLAY: "message-feed-overlay",
+	/** Main admin dashboard area */
+	ADMIN_PANEL: "admin-panel",
+	/** User or site settings dashboard area */
+	SETTINGS_PANEL: "settings-panel",
+	/** The 'plus' (+) menu in the message composer */
+	CHAT_PLUS_MENU: "chat-plus-menu",
+	/** Custom tab in the emoji/gif selection panel */
+	EMOJI_PICKER_GIF_TAB: "emoji-picker-gif-tab",
+	/** Custom tab in the emoji/sticker selection panel */
+	EMOJI_PICKER_STICKER_TAB: "emoji-picker-sticker-tab",
+	/** Full-screen or modal dialog specifically for TubeScan */
+	TUBESCAN_DIALOG: "tubescan-dialog",
+	/** Dedicated settings panel rendered in the Owner Dashboard */
+	OWNER_SETTINGS: "owner-settings",
+	/** Dedicated settings panel rendered in the Site Admin Dashboard */
+	ADDON_SETTINGS: "addon-settings"
+};
+//#endregion
+export { MOUNT_POINTS };