npm - @adaas/are-html - Versions diffs - 0.0.23 → 0.0.24 - Mend

@adaas/are-html 0.0.23 → 0.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (81) hide show

package/examples/os-desktop/dist/chunks/chunk-EIIGUL6N.js ADDED Viewed

@@ -0,0 +1,30 @@
+import {
+  AreSignal,
+  R2 as R,
+  __decorateClass,
+  __name
+} from "./chunk-6K72IBO4.js";
+// examples/os-desktop/src/signals/MouseState.signal.ts
+var MouseState = class extends AreSignal {
+  constructor(x, y) {
+    super({ data: { x, y } });
+  }
+  get x() {
+    return this.data.x;
+  }
+  get y() {
+    return this.data.y;
+  }
+};
+__name(MouseState, "MouseState");
+MouseState = __decorateClass([
+  R.Define({
+    namespace: "a-are-os-desktop",
+    description: "Live pointer-position state signal {x, y}. Emitted throttled from a global mousemove listener and consumed by the HUD via a typed @Are.Signal(MouseState) handler."
+  })
+], MouseState);
+export {
+  MouseState
+};

package/examples/os-desktop/dist/chunks/chunk-WOH7L5UR.js ADDED Viewed

@@ -0,0 +1,30 @@
+import {
+  AreSignal,
+  R2 as R,
+  __decorateClass,
+  __name
+} from "./chunk-6K72IBO4.js";
+// examples/os-desktop/src/signals/SelectionState.signal.ts
+var SelectionState = class extends AreSignal {
+  constructor(text) {
+    super({ data: { text, length: text.length } });
+  }
+  get text() {
+    return this.data.text;
+  }
+  get length() {
+    return this.data.length;
+  }
+};
+__name(SelectionState, "SelectionState");
+SelectionState = __decorateClass([
+  R.Define({
+    namespace: "a-are-os-desktop",
+    description: "Current text-selection state signal {text, length}. Emitted from a global selectionchange listener and consumed independently by the OS HUD and the Marketing app."
+  })
+], SelectionState);
+export {
+  SelectionState
+};

package/examples/os-desktop/dist/index.html ADDED Viewed

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ARE · OS Desktop</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { height: 100%; }
+    body { background: #050410; color: #f5f5f7; overflow: hidden; }
+    /* The mount root is a real block-level container. */
+    are-root { display: block; height: 100%; }
+    /*
+     * ARE wraps every component (and interpolated text) in a custom tag. Left
+     * as the default `display: inline`, those wrappers — and the empty
+     * <are-text> whitespace nodes between siblings — would become the actual
+     * fl/grid items and break layout. `display: contents` makes each wrapper's
+     * box disappear while keeping its children in the parent's flow.
+     */
+    os-desktop, menu-bar, app-stage, os-hud, os-dock, os-launchpad,
+    app-window, marketing-app, post-editor, post-preview,
+    gantt-app, gantt-toolbar, gantt-chart, are-text { display: contents; }
+  </style>
+</head>
+<body>
+  <!-- Outer ARE root renders the persistent OS shell (desktop + dock + bars). -->
+  <are-root id="os"><os-desktop></os-desktop></are-root>
+  <script type="module" src="./app.js"></script>
+</body>
+</html>

package/examples/os-desktop/public/index.html ADDED Viewed

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ARE · OS Desktop</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { height: 100%; }
+    body { background: #050410; color: #f5f5f7; overflow: hidden; }
+    /* The mount root is a real block-level container. */
+    are-root { display: block; height: 100%; }
+    /*
+     * ARE wraps every component (and interpolated text) in a custom tag. Left
+     * as the default `display: inline`, those wrappers — and the empty
+     * <are-text> whitespace nodes between siblings — would become the actual
+     * fl/grid items and break layout. `display: contents` makes each wrapper's
+     * box disappear while keeping its children in the parent's flow.
+     */
+    os-desktop, menu-bar, app-stage, os-hud, os-dock, os-launchpad,
+    app-window, marketing-app, post-editor, post-preview,
+    gantt-app, gantt-toolbar, gantt-chart, are-text { display: contents; }
+  </style>
+</head>
+<body>
+  <!-- Outer ARE root renders the persistent OS shell (desktop + dock + bars). -->
+  <are-root id="os"><os-desktop></os-desktop></are-root>
+  <script type="module" src="./app.js"></script>
+</body>
+</html>

package/examples/os-desktop/src/apps/gantt/GanttApp.component.ts ADDED Viewed

@@ -0,0 +1,41 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are, AreNode } from "@adaas/are";
+import { AreHTMLNode } from "src";
+/**
+ * GanttApp — root of the Gantt app bundle. Composes the app's own component set:
+ * a `<gantt-toolbar>` and a `<gantt-chart>`. Both are resolved lazily out of the
+ * same bundle by the AppComponentResolver.
+ */
+export class GanttApp extends Are {
+    @Are.Template
+    template(@A_Inject(A_Caller) node: AreNode) {
+        node.setContent(`
+            <div class="gt">
+                <div class="gt-head">
+                    <h2>Project Timeline</h2>
+                    <span class="gt-be">backend · <code>/apps/gantt/api</code></span>
+                </div>
+                <gantt-toolbar></gantt-toolbar>
+                <gantt-chart></gantt-chart>
+            </div>
+        `);
+    }
+    @Are.Styles
+    styles(@A_Inject(A_Caller) node: AreHTMLNode) {
+        node.setStyles(`
+            gantt-toolbar, gantt-chart { display: block; }
+            .gt { display: flex; flex-direction: column; height: 100%; color: #ececf1; }
+            .gt-head {
+                display: flex; align-items: baseline; justify-content: space-between;
+                padding: 18px 24px; border-bottom: 1px solid rgba(255,255,255,0.07);
+            }
+            .gt-head h2 { font-size: 18px; font-weight: 700; }
+            .gt-be { font-size: 11px; color: #7fa0c8; }
+            .gt-be code { color: #b8d4ff; }
+        `);
+    }
+}

package/examples/os-desktop/src/apps/gantt/GanttChart.component.ts ADDED Viewed

@@ -0,0 +1,126 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { A_Logger } from "@adaas/a-utils/a-logger";
+import { Are, AreNode } from "@adaas/are";
+import { AreHTMLNode } from "src";
+import { GanttStore } from "./GanttStore";
+import { MouseState } from "../../signals/MouseState.signal";
+const TOTAL_DAYS = 30;
+const ROW_H = 30;
+/**
+ * GanttChart — the Gantt app's visualization.
+ *
+ * On mount it loads tasks from the app's OWN backend (`/apps/gantt/api/tasks`),
+ * mirrors the app's {@link GanttStore}, and re-paints its bars imperatively so
+ * the toolbar can add tasks without a full re-render. It also consumes the
+ * OS-wide {@link MouseState} signal to glide a vertical guide line under the
+ * pointer — the same signal the HUD reads, proving signals fan out to any
+ * component that cares.
+ */
+export class GanttChart extends Are {
+    protected _unsubscribe?: () => void;
+    @Are.Template
+    template(@A_Inject(A_Caller) node: AreNode) {
+        const cols = Array.from({ length: TOTAL_DAYS / 5 }, (_, i) =>
+            `<div class="gc-col"><span>d${i * 5}</span></div>`).join('');
+        node.setContent(`
+            <div class="gc">
+                <div class="gc-grid">${cols}</div>
+                <div class="gc-bars"></div>
+                <div class="gc-cursor"></div>
+            </div>
+        `);
+    }
+    @Are.onAfterMount
+    async onMount(@A_Inject(A_Logger) logger: A_Logger) {
+        this._unsubscribe = GanttStore.subscribe(() => this.paint());
+        try {
+            const res = await fetch('/apps/gantt/api/tasks');
+            const data = await res.json();
+            GanttStore.set(Array.isArray(data.tasks) ? data.tasks : []);
+        } catch (error) {
+            logger.error(error);
+            this.paint();
+        }
+    }
+    @Are.onBeforeUnmount
+    onUnmount() {
+        this._unsubscribe?.();
+        this._unsubscribe = undefined;
+    }
+    @Are.Signal(MouseState)
+    onMouse(@A_Inject(MouseState) signal: MouseState) {
+        const cursor = document.querySelector('.gc-cursor') as HTMLElement | null;
+        if (!cursor || !cursor.parentElement) return;
+        const rect = cursor.parentElement.getBoundingClientRect();
+        const x = Math.max(0, Math.min(signal.x - rect.left, rect.width));
+        cursor.style.left = `${x}px`;
+    }
+    protected paint() {
+        const bars = document.querySelector('.gc-bars') as HTMLElement | null;
+        if (!bars) return;
+        bars.style.height = `${Math.max(1, GanttStore.tasks.length) * ROW_H + 8}px`;
+        bars.innerHTML = GanttStore.tasks.map(task => {
+            const left = (task.start / TOTAL_DAYS) * 100;
+            const width = ((task.end - task.start) / TOTAL_DAYS) * 100;
+            const top = task.track * ROW_H + 4;
+            return `
+                <div class="gc-bar" style="left:${left}%;width:${width}%;top:${top}px;background:${task.color}">
+                    <span>${task.name}</span>
+                </div>
+            `;
+        }).join('');
+    }
+    @Are.Styles
+    styles(@A_Inject(A_Caller) node: AreHTMLNode) {
+        node.setStyles(`
+            .gc {
+                position: relative;
+                flex: 1;
+                margin: 18px 24px;
+                border-radius: 12px;
+                background: rgba(0,0,0,0.22);
+                border: 1px solid rgba(255,255,255,0.08);
+                overflow: hidden;
+            }
+            .gc-grid { position: absolute; inset: 0; display: flex; }
+            .gc-col {
+                flex: 1;
+                border-right: 1px dashed rgba(255,255,255,0.07);
+                padding: 6px 8px;
+            }
+            .gc-col span { font-size: 10px; color: #6f7a8c; font-family: ui-monospace, monospace; }
+            .gc-bars { position: relative; margin-top: 26px; }
+            .gc-bar {
+                position: absolute;
+                height: ${ROW_H - 8}px;
+                border-radius: 6px;
+                display: flex; align-items: center;
+                padding: 0 10px;
+                color: white; font-size: 12px; font-weight: 600;
+                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+                overflow: hidden; white-space: nowrap;
+                transition: left 0.2s, width 0.2s;
+            }
+            .gc-cursor {
+                position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
+                background: rgba(255,255,255,0.55);
+                pointer-events: none;
+                box-shadow: 0 0 10px rgba(255,255,255,0.5);
+            }
+        `);
+    }
+}

package/examples/os-desktop/src/apps/gantt/GanttStore.ts ADDED Viewed

@@ -0,0 +1,47 @@
+export interface GanttTask {
+    id: string;
+    name: string;
+    start: number;   // day offset from project start
+    end: number;     // day offset (exclusive)
+    color: string;
+    track: number;   // row index
+}
+/**
+ * GanttStore — the Gantt app's OWN internal state (its task list).
+ *
+ * Like the Marketing app's store, this is private to the Gantt bundle and is
+ * how the toolbar (writer) and the chart (reader) stay in sync without touching
+ * the OS signal bus.
+ */
+class GanttStoreImpl {
+    protected _tasks: GanttTask[] = [];
+    protected _listeners: Set<() => void> = new Set();
+    get tasks(): GanttTask[] {
+        return this._tasks;
+    }
+    set(tasks: GanttTask[]): void {
+        this._tasks = tasks;
+        this.emit();
+    }
+    add(task: GanttTask): void {
+        this._tasks = [...this._tasks, task];
+        this.emit();
+    }
+    subscribe(listener: () => void): () => void {
+        this._listeners.add(listener);
+        return () => this._listeners.delete(listener);
+    }
+    protected emit(): void {
+        for (const listener of this._listeners) listener();
+    }
+}
+export const GanttStore = new GanttStoreImpl();

package/examples/os-desktop/src/apps/gantt/GanttToolbar.component.ts ADDED Viewed

@@ -0,0 +1,73 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { A_Logger } from "@adaas/a-utils/a-logger";
+import { Are, AreNode } from "@adaas/are";
+import { AreHTMLNode } from "src";
+import { GanttStore, GanttTask } from "./GanttStore";
+const COLORS = ['#5b8def', '#34c759', '#ff9f0a', '#bf5af2', '#ff375f', '#64d2ff'];
+const NAMES = ['Discovery', 'Design', 'Build', 'Review', 'QA', 'Launch', 'Retro'];
+/**
+ * GanttToolbar — the Gantt app's controls. Writes into the app's own
+ * {@link GanttStore} (add a task) and can reload the task list from the app's
+ * OWN backend (`/apps/gantt/api/tasks`).
+ */
+export class GanttToolbar extends Are {
+    @Are.Template
+    template(@A_Inject(A_Caller) node: AreNode) {
+        node.setContent(`
+            <div class="tb">
+                <button class="tb-btn tb-add" @click="$add()">＋ Add task</button>
+                <button class="tb-btn" @click="$reload()">↻ Reload from backend</button>
+                <span class="tb-hint">Tasks are served by the Gantt app's own backend.</span>
+            </div>
+        `);
+    }
+    @Are.EventHandler
+    add() {
+        const tracks = GanttStore.tasks.length;
+        const start = Math.floor(Math.random() * 20);
+        const task: GanttTask = {
+            id: `t-${Date.now()}`,
+            name: NAMES[Math.floor(Math.random() * NAMES.length)],
+            start,
+            end: start + 3 + Math.floor(Math.random() * 6),
+            color: COLORS[tracks % COLORS.length],
+            track: tracks,
+        };
+        GanttStore.add(task);
+    }
+    @Are.EventHandler
+    async reload(@A_Inject(A_Logger) logger: A_Logger) {
+        try {
+            const res = await fetch('/apps/gantt/api/tasks');
+            const data = await res.json();
+            if (Array.isArray(data.tasks)) GanttStore.set(data.tasks);
+        } catch (error) {
+            logger.error(error);
+        }
+    }
+    @Are.Styles
+    styles(@A_Inject(A_Caller) node: AreHTMLNode) {
+        node.setStyles(`
+            .tb {
+                display: flex; align-items: center; gap: 10px;
+                padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,0.07);
+            }
+            .tb-btn {
+                padding: 7px 13px; border: 1px solid rgba(255,255,255,0.14);
+                border-radius: 9px; background: rgba(255,255,255,0.06);
+                color: #ececf1; font-size: 13px; font-weight: 600; cursor: pointer;
+            }
+            .tb-btn:hover { background: rgba(255,255,255,0.12); }
+            .tb-add { background: #2f6df6; border-color: transparent; }
+            .tb-hint { font-size: 11px; color: #7d889a; margin-left: auto; }
+        `);
+    }
+}

package/examples/os-desktop/src/apps/gantt/index.ts ADDED Viewed

@@ -0,0 +1,13 @@
+/**
+ * Gantt app bundle entry.
+ *
+ * The OS lazily `import()`s this module when the Gantt app is installed/opened.
+ * It exports the app's full component set; the AppComponentResolver selects each
+ * class by the `export` name listed in the descriptor (see GanttApp.backend.ts).
+ */
+export { GanttApp } from "./GanttApp.component";
+export { GanttToolbar } from "./GanttToolbar.component";
+export { GanttChart } from "./GanttChart.component";
+import { GanttApp } from "./GanttApp.component";
+export default GanttApp;

package/examples/os-desktop/src/apps/marketing/MarketingApp.component.ts ADDED Viewed

@@ -0,0 +1,53 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are, AreNode } from "@adaas/are";
+import { AreHTMLNode } from "src";
+/**
+ * MarketingApp — the root component of the Marketing app bundle.
+ *
+ * It only composes the app's own component set: a `<post-editor>` and a
+ * `<post-preview>`. Those tags are not registered with the OS at boot — the
+ * engine resolves them through the AppComponentResolver, which pulls them from
+ * THIS same bundle (one bundle, three components).
+ */
+export class MarketingApp extends Are {
+    @Are.Template
+    template(@A_Inject(A_Caller) node: AreNode) {
+        node.setContent(`
+            <div class="mk">
+                <div class="mk-head">
+                    <h2>LinkedIn Post Builder</h2>
+                    <span class="mk-be">backend · <code>/apps/marketing/api</code></span>
+                </div>
+                <div class="mk-grid">
+                    <post-editor></post-editor>
+                    <post-preview></post-preview>
+                </div>
+            </div>
+        `);
+    }
+    @Are.Styles
+    styles(@A_Inject(A_Caller) node: AreHTMLNode) {
+        node.setStyles(`
+            post-editor, post-preview { display: contents; }
+            .mk { display: flex; flex-direction: column; height: 100%; color: #ececf1; }
+            .mk-head {
+                display: flex; align-items: baseline; justify-content: space-between;
+                padding: 18px 24px; border-bottom: 1px solid rgba(255,255,255,0.07);
+            }
+            .mk-head h2 { font-size: 18px; font-weight: 700; }
+            .mk-be { font-size: 11px; color: #8b7fb0; }
+            .mk-be code { color: #c9b8ff; }
+            .mk-grid {
+                flex: 1;
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 0;
+                min-height: 0;
+            }
+        `);
+    }
+}

package/examples/os-desktop/src/apps/marketing/MarketingStore.ts ADDED Viewed

@@ -0,0 +1,34 @@
+/**
+ * MarketingStore — the Marketing app's OWN internal state.
+ *
+ * It lives entirely inside the marketing bundle and has nothing to do with the
+ * OS signal bus. This demonstrates that an app manages its own state however it
+ * likes: here a tiny observable holding the post draft, shared between the
+ * editor (writer) and the preview (reader). Both components ship in the same
+ * bundle, so they share this singleton.
+ */
+class MarketingStoreImpl {
+    protected _text: string =
+        "Thrilled to share that we shipped runtime app loading in our OS shell! 🚀\n\nEach app is its own bundle + backend, loaded on demand. No redeploys, no reloads.";
+    protected _listeners: Set<() => void> = new Set();
+    get text(): string {
+        return this._text;
+    }
+    set(text: string): void {
+        this._text = text;
+        for (const listener of this._listeners) {
+            listener();
+        }
+    }
+    subscribe(listener: () => void): () => void {
+        this._listeners.add(listener);
+        return () => this._listeners.delete(listener);
+    }
+}
+export const MarketingStore = new MarketingStoreImpl();

package/examples/os-desktop/src/apps/marketing/PostEditor.component.ts ADDED Viewed

@@ -0,0 +1,153 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { A_Logger } from "@adaas/a-utils/a-logger";
+import { Are, AreEvent, AreNode } from "@adaas/are";
+import { AreHTMLNode } from "src";
+import { MarketingStore } from "./MarketingStore";
+/**
+ * PostEditor — the writing surface of the Marketing app.
+ *
+ * It writes the draft into the app's own {@link MarketingStore} on every
+ * keystroke (so the preview can mirror it) and talks to the app's OWN backend
+ * (`/apps/marketing/api/hashtags`) to fetch suggested hashtags — proving each
+ * app carries its own server, not just its own UI.
+ */
+export class PostEditor extends Are {
+    protected _hashtags: string[] = [];
+    @Are.Template
+    template(@A_Inject(A_Caller) node: AreNode) {
+        node.setContent(this.build());
+    }
+    @Are.EventHandler
+    edit(@A_Inject(AreEvent) event: AreEvent) {
+        const el = event.get('native')?.target as HTMLTextAreaElement;
+        if (el) MarketingStore.set(el.value);
+    }
+    @Are.EventHandler
+    async suggest(
+        @A_Inject(A_Logger) logger: A_Logger,
+    ) {
+        const btn = document.getElementById('pe-suggest') as HTMLButtonElement | null;
+        if (btn) { btn.disabled = true; btn.textContent = 'Asking backend…'; }
+        try {
+            const topic = encodeURIComponent(MarketingStore.text.slice(0, 60));
+            const res = await fetch(`/apps/marketing/api/hashtags?topic=${topic}`);
+            const data = await res.json();
+            this._hashtags = Array.isArray(data.hashtags) ? data.hashtags : [];
+        } catch (error) {
+            logger.error(error);
+            this._hashtags = [];
+        }
+        if (btn) { btn.disabled = false; btn.textContent = 'Suggest hashtags'; }
+        this.paintChips();
+    }
+    /**
+     * Renders the suggested-hashtag chips imperatively. Each chip appends its
+     * tag to the app's store (and the textarea) via a native listener — the
+     * editor never re-renders, so the textarea keeps its caret and focus.
+     */
+    protected paintChips() {
+        const host = document.getElementById('pe-chips');
+        if (!host) return;
+        host.innerHTML = '';
+        if (!this._hashtags.length) {
+            const empty = document.createElement('span');
+            empty.className = 'pe-empty';
+            empty.textContent = 'Click “Suggest” to ask the marketing backend for hashtags.';
+            host.appendChild(empty);
+            return;
+        }
+        for (const tag of this._hashtags) {
+            const chip = document.createElement('button');
+            chip.className = 'pe-chip';
+            chip.textContent = `#${tag}`;
+            chip.addEventListener('click', () => this.appendTag(tag));
+            host.appendChild(chip);
+        }
+    }
+    protected appendTag(tag: string) {
+        MarketingStore.set(`${MarketingStore.text} #${tag}`);
+        const ta = document.querySelector('.pe-text') as HTMLTextAreaElement | null;
+        if (ta) ta.value = MarketingStore.text;
+    }
+    protected build(): string {
+        return `
+            <section class="pe">
+                <label class="pe-label">Draft</label>
+                <textarea class="pe-text" @input="$edit()" spellcheck="false">${this.escape(MarketingStore.text)}</textarea>
+                <div class="pe-tools">
+                    <button class="pe-suggest" id="pe-suggest" @click="$suggest()">Suggest hashtags</button>
+                </div>
+                <div class="pe-chips" id="pe-chips">
+                    <span class="pe-empty">Click “Suggest” to ask the marketing backend for hashtags.</span>
+                </div>
+            </section>
+        `;
+    }
+    protected escape(text: string): string {
+        return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+    @Are.Styles
+    styles(@A_Inject(A_Caller) node: AreHTMLNode) {
+        node.setStyles(`
+            .pe {
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+                padding: 22px 24px;
+                border-right: 1px solid rgba(255,255,255,0.07);
+                min-height: 0;
+            }
+            .pe-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #8b7fb0; }
+            .pe-text {
+                flex: 1;
+                min-height: 200px;
+                resize: none;
+                padding: 14px 16px;
+                border-radius: 12px;
+                border: 1px solid rgba(255,255,255,0.1);
+                background: rgba(0,0,0,0.25);
+                color: #f2f2f5;
+                font-size: 14px;
+                line-height: 1.6;
+                font-family: inherit;
+            }
+            .pe-text:focus { outline: none; border-color: #7c6fd6; }
+            .pe-suggest {
+                padding: 9px 16px;
+                border: none;
+                border-radius: 10px;
+                background: #2f6df6;
+                color: white;
+                font-size: 13px;
+                font-weight: 600;
+                cursor: pointer;
+            }
+            .pe-suggest:disabled { opacity: 0.6; cursor: default; }
+            .pe-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
+            .pe-chip {
+                padding: 4px 10px;
+                border: 1px solid rgba(124,111,214,0.5);
+                border-radius: 999px;
+                background: rgba(124,111,214,0.14);
+                color: #c9b8ff;
+                font-size: 12px;
+                cursor: pointer;
+            }
+            .pe-chip:hover { background: rgba(124,111,214,0.28); }
+            .pe-empty { font-size: 12px; color: #6f6790; }
+        `);
+    }
+}