@bpmnkit/plugins 0.0.8

package/dist/feel-playground/css.d.ts

@@ -0,0 +1,4 @@
+export declare const FEEL_PLAYGROUND_STYLE_ID = "feel-playground-styles";
+export declare const FEEL_PLAYGROUND_CSS = "\n/* \u2500\u2500 Light-theme defaults \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.feel-playground {\n  --fp-bg: #fafafa;\n  --fp-header-bg: #f0f0f0;\n  --fp-border: #e0e0e0;\n  --fp-text: #333333;\n  --fp-muted: #666666;\n  --fp-input-bg: #ffffff;\n  --fp-result-bg: #f5f5f5;\n  --fp-error-bg: #fff2f2;\n  --fp-error-text: #cc0000;\n  --fp-active-btn-bg: #0062ff;\n  --fp-active-btn-fg: #ffffff;\n  --fp-inactive-btn-bg: #e8e8e8;\n  --fp-inactive-btn-border: #d0d0d0;\n  --fp-inactive-btn-fg: #444444;\n  --fp-select-bg: #ffffff;\n}\n\n/* \u2500\u2500 Dark-theme overrides \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n[data-theme=\"dark\"] .feel-playground {\n  --fp-bg: #1e1e1e;\n  --fp-header-bg: #252526;\n  --fp-border: #3c3c3c;\n  --fp-text: #d4d4d4;\n  --fp-muted: #888888;\n  --fp-input-bg: #1e1e1e;\n  --fp-result-bg: #252526;\n  --fp-error-bg: #3c1e1e;\n  --fp-error-text: #f44747;\n  --fp-active-btn-bg: #0e639c;\n  --fp-active-btn-fg: #ffffff;\n  --fp-inactive-btn-bg: #3c3c3c;\n  --fp-inactive-btn-border: #555555;\n  --fp-inactive-btn-fg: #cccccc;\n  --fp-select-bg: #3c3c3c;\n}\n\n.feel-playground {\n  width: 100%;\n  height: 100%;\n  background: var(--fp-bg);\n  color: var(--fp-text);\n  font-family: monospace;\n  font-size: 13px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow-y: auto;\n}\n\n/* Overlay wrapper \u2014 used only by createFeelPlaygroundPlugin() */\n.feel-playground-overlay {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  width: 480px;\n  max-height: 70%;\n  z-index: 100;\n  border-top-left-radius: 6px;\n  border: 1px solid var(--fp-border, #e0e0e0);\n  border-right: none;\n  border-bottom: none;\n  overflow: hidden;\n  box-shadow: -4px -4px 20px rgba(0, 0, 0, 0.15);\n}\n\n[data-theme=\"dark\"] .feel-playground-overlay {\n  border-color: #3c3c3c;\n  box-shadow: -4px -4px 20px rgba(0, 0, 0, 0.4);\n}\n\n.feel-playground__header {\n  display: flex;\n  align-items: center;\n  padding: 6px 16px;\n  background: var(--fp-header-bg);\n  border-bottom: 1px solid var(--fp-border);\n  gap: 8px;\n  user-select: none;\n  width: 100%;\n  max-width: 800px;\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n\n.feel-playground__title {\n  font-weight: bold;\n  color: var(--fp-text);\n  font-size: 12px;\n  flex: 1;\n  font-family: system-ui, sans-serif;\n}\n\n.feel-playground__close {\n  cursor: pointer;\n  color: var(--fp-muted);\n  background: none;\n  border: none;\n  font-size: 16px;\n  padding: 0 4px;\n  line-height: 1;\n}\n\n.feel-playground__close:hover { color: var(--fp-text); }\n\n.feel-playground__mode {\n  display: flex;\n  gap: 4px;\n}\n\n.feel-playground__mode button {\n  background: var(--fp-inactive-btn-bg);\n  border: 1px solid var(--fp-inactive-btn-border);\n  color: var(--fp-inactive-btn-fg);\n  border-radius: 3px;\n  padding: 2px 8px;\n  font-size: 11px;\n  cursor: pointer;\n}\n\n.feel-playground__mode button.active {\n  background: var(--fp-active-btn-bg);\n  color: var(--fp-active-btn-fg);\n  border-color: var(--fp-active-btn-bg);\n}\n\n.feel-playground__body {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px 16px;\n  flex: 1;\n  width: 100%;\n  max-width: 800px;\n  box-sizing: border-box;\n}\n\n.feel-playground__label {\n  font-size: 11px;\n  color: var(--fp-muted);\n  margin-bottom: 2px;\n  font-family: system-ui, sans-serif;\n}\n\n.feel-playground__input-wrap {\n  position: relative;\n  border: 1px solid var(--fp-border);\n  border-radius: 3px;\n  background: var(--fp-input-bg);\n}\n\n.feel-playground__input-wrap:focus-within {\n  border-color: var(--fp-active-btn-bg);\n}\n\n.feel-playground__highlight {\n  position: absolute;\n  top: 0; left: 0;\n  padding: 5px 8px;\n  pointer-events: none;\n  white-space: pre-wrap;\n  word-break: break-word;\n  color: transparent;\n  z-index: 1;\n  font: inherit;\n  line-height: 1.5;\n}\n\n.feel-playground__textarea {\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  background: transparent;\n  border: none;\n  color: var(--fp-text);\n  padding: 5px 8px;\n  font: inherit;\n  line-height: 1.5;\n  resize: vertical;\n  min-height: 60px;\n  outline: none;\n  z-index: 2;\n  caret-color: var(--fp-text);\n}\n\n.feel-playground__context {\n  width: 100%;\n  box-sizing: border-box;\n  background: var(--fp-input-bg);\n  border: 1px solid var(--fp-border);\n  border-radius: 3px;\n  color: var(--fp-text);\n  padding: 5px 8px;\n  font: inherit;\n  resize: vertical;\n  min-height: 50px;\n  outline: none;\n}\n\n.feel-playground__context:focus {\n  border-color: var(--fp-active-btn-bg);\n}\n\n.feel-playground__result {\n  padding: 6px 8px;\n  background: var(--fp-result-bg);\n  border: 1px solid var(--fp-border);\n  border-radius: 3px;\n  min-height: 28px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: system-ui, sans-serif;\n}\n\n.feel-playground__result.null-val  { color: var(--fp-muted); font-style: italic; }\n\n/* result type colors \u2014 light theme */\n.feel-playground__result.bool-true  { color: #15803d; }\n.feel-playground__result.bool-false { color: #b45309; }\n.feel-playground__result.number     { color: #0369a1; }\n.feel-playground__result.string     { color: #9f1239; }\n\n/* result type colors \u2014 dark theme */\n[data-theme=\"dark\"] .feel-playground__result.bool-true  { color: #4ec9b0; }\n[data-theme=\"dark\"] .feel-playground__result.bool-false { color: #ce9178; }\n[data-theme=\"dark\"] .feel-playground__result.number     { color: #b5cea8; }\n[data-theme=\"dark\"] .feel-playground__result.string     { color: #ce9178; }\n\n.feel-playground__errors {\n  font-size: 11px;\n  color: var(--fp-error-text);\n  padding: 4px 6px;\n  background: var(--fp-error-bg);\n  border-radius: 3px;\n  font-family: system-ui, sans-serif;\n}\n\n.feel-playground__examples {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.feel-playground__examples select {\n  flex: 1;\n  background: var(--fp-select-bg);\n  border: 1px solid var(--fp-border);\n  color: var(--fp-text);\n  padding: 3px 6px;\n  border-radius: 3px;\n  font-size: 12px;\n  font-family: system-ui, sans-serif;\n}\n\n/* \u2500\u2500 FEEL syntax highlighting \u2014 light theme \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.feel-keyword         { color: #0000cc; }\n.feel-operator        { color: #555555; }\n.feel-literal-number  { color: #09885a; }\n.feel-literal-string  { color: #a31515; }\n.feel-literal-temporal{ color: #0070c1; }\n.feel-literal-bool    { color: #0000cc; }\n.feel-literal-null    { color: #0000cc; }\n.feel-builtin         { color: #795e26; }\n.feel-variable        { color: #001080; }\n.feel-comment         { color: #008000; font-style: italic; }\n.feel-punctuation     { color: #555555; }\n\n/* \u2500\u2500 FEEL syntax highlighting \u2014 dark theme \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n[data-theme=\"dark\"] .feel-keyword          { color: #569cd6; }\n[data-theme=\"dark\"] .feel-operator         { color: #d4d4d4; }\n[data-theme=\"dark\"] .feel-literal-number   { color: #b5cea8; }\n[data-theme=\"dark\"] .feel-literal-string   { color: #ce9178; }\n[data-theme=\"dark\"] .feel-literal-temporal { color: #4ec9b0; }\n[data-theme=\"dark\"] .feel-literal-bool     { color: #569cd6; }\n[data-theme=\"dark\"] .feel-literal-null     { color: #569cd6; }\n[data-theme=\"dark\"] .feel-builtin          { color: #dcdcaa; }\n[data-theme=\"dark\"] .feel-variable         { color: #9cdcfe; }\n[data-theme=\"dark\"] .feel-comment          { color: #6a9955; font-style: italic; }\n[data-theme=\"dark\"] .feel-punctuation      { color: #d4d4d4; }\n";
+export declare function injectPlaygroundStyles(): void;
+//# sourceMappingURL=css.d.ts.map

package/dist/feel-playground/css.js

@@ -0,0 +1,292 @@
+export const FEEL_PLAYGROUND_STYLE_ID = "feel-playground-styles";
+export const FEEL_PLAYGROUND_CSS = `
+/* ── Light-theme defaults ─────────────────────────────────────────── */
+.feel-playground {
+  --fp-bg: #fafafa;
+  --fp-header-bg: #f0f0f0;
+  --fp-border: #e0e0e0;
+  --fp-text: #333333;
+  --fp-muted: #666666;
+  --fp-input-bg: #ffffff;
+  --fp-result-bg: #f5f5f5;
+  --fp-error-bg: #fff2f2;
+  --fp-error-text: #cc0000;
+  --fp-active-btn-bg: #0062ff;
+  --fp-active-btn-fg: #ffffff;
+  --fp-inactive-btn-bg: #e8e8e8;
+  --fp-inactive-btn-border: #d0d0d0;
+  --fp-inactive-btn-fg: #444444;
+  --fp-select-bg: #ffffff;
+}
+
+/* ── Dark-theme overrides ─────────────────────────────────────────── */
+[data-theme="dark"] .feel-playground {
+  --fp-bg: #1e1e1e;
+  --fp-header-bg: #252526;
+  --fp-border: #3c3c3c;
+  --fp-text: #d4d4d4;
+  --fp-muted: #888888;
+  --fp-input-bg: #1e1e1e;
+  --fp-result-bg: #252526;
+  --fp-error-bg: #3c1e1e;
+  --fp-error-text: #f44747;
+  --fp-active-btn-bg: #0e639c;
+  --fp-active-btn-fg: #ffffff;
+  --fp-inactive-btn-bg: #3c3c3c;
+  --fp-inactive-btn-border: #555555;
+  --fp-inactive-btn-fg: #cccccc;
+  --fp-select-bg: #3c3c3c;
+}
+
+.feel-playground {
+  width: 100%;
+  height: 100%;
+  background: var(--fp-bg);
+  color: var(--fp-text);
+  font-family: monospace;
+  font-size: 13px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow-y: auto;
+}
+
+/* Overlay wrapper — used only by createFeelPlaygroundPlugin() */
+.feel-playground-overlay {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 480px;
+  max-height: 70%;
+  z-index: 100;
+  border-top-left-radius: 6px;
+  border: 1px solid var(--fp-border, #e0e0e0);
+  border-right: none;
+  border-bottom: none;
+  overflow: hidden;
+  box-shadow: -4px -4px 20px rgba(0, 0, 0, 0.15);
+}
+
+[data-theme="dark"] .feel-playground-overlay {
+  border-color: #3c3c3c;
+  box-shadow: -4px -4px 20px rgba(0, 0, 0, 0.4);
+}
+
+.feel-playground__header {
+  display: flex;
+  align-items: center;
+  padding: 6px 16px;
+  background: var(--fp-header-bg);
+  border-bottom: 1px solid var(--fp-border);
+  gap: 8px;
+  user-select: none;
+  width: 100%;
+  max-width: 800px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.feel-playground__title {
+  font-weight: bold;
+  color: var(--fp-text);
+  font-size: 12px;
+  flex: 1;
+  font-family: system-ui, sans-serif;
+}
+
+.feel-playground__close {
+  cursor: pointer;
+  color: var(--fp-muted);
+  background: none;
+  border: none;
+  font-size: 16px;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+.feel-playground__close:hover { color: var(--fp-text); }
+
+.feel-playground__mode {
+  display: flex;
+  gap: 4px;
+}
+
+.feel-playground__mode button {
+  background: var(--fp-inactive-btn-bg);
+  border: 1px solid var(--fp-inactive-btn-border);
+  color: var(--fp-inactive-btn-fg);
+  border-radius: 3px;
+  padding: 2px 8px;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.feel-playground__mode button.active {
+  background: var(--fp-active-btn-bg);
+  color: var(--fp-active-btn-fg);
+  border-color: var(--fp-active-btn-bg);
+}
+
+.feel-playground__body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 16px;
+  flex: 1;
+  width: 100%;
+  max-width: 800px;
+  box-sizing: border-box;
+}
+
+.feel-playground__label {
+  font-size: 11px;
+  color: var(--fp-muted);
+  margin-bottom: 2px;
+  font-family: system-ui, sans-serif;
+}
+
+.feel-playground__input-wrap {
+  position: relative;
+  border: 1px solid var(--fp-border);
+  border-radius: 3px;
+  background: var(--fp-input-bg);
+}
+
+.feel-playground__input-wrap:focus-within {
+  border-color: var(--fp-active-btn-bg);
+}
+
+.feel-playground__highlight {
+  position: absolute;
+  top: 0; left: 0;
+  padding: 5px 8px;
+  pointer-events: none;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: transparent;
+  z-index: 1;
+  font: inherit;
+  line-height: 1.5;
+}
+
+.feel-playground__textarea {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  background: transparent;
+  border: none;
+  color: var(--fp-text);
+  padding: 5px 8px;
+  font: inherit;
+  line-height: 1.5;
+  resize: vertical;
+  min-height: 60px;
+  outline: none;
+  z-index: 2;
+  caret-color: var(--fp-text);
+}
+
+.feel-playground__context {
+  width: 100%;
+  box-sizing: border-box;
+  background: var(--fp-input-bg);
+  border: 1px solid var(--fp-border);
+  border-radius: 3px;
+  color: var(--fp-text);
+  padding: 5px 8px;
+  font: inherit;
+  resize: vertical;
+  min-height: 50px;
+  outline: none;
+}
+
+.feel-playground__context:focus {
+  border-color: var(--fp-active-btn-bg);
+}
+
+.feel-playground__result {
+  padding: 6px 8px;
+  background: var(--fp-result-bg);
+  border: 1px solid var(--fp-border);
+  border-radius: 3px;
+  min-height: 28px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: system-ui, sans-serif;
+}
+
+.feel-playground__result.null-val  { color: var(--fp-muted); font-style: italic; }
+
+/* result type colors — light theme */
+.feel-playground__result.bool-true  { color: #15803d; }
+.feel-playground__result.bool-false { color: #b45309; }
+.feel-playground__result.number     { color: #0369a1; }
+.feel-playground__result.string     { color: #9f1239; }
+
+/* result type colors — dark theme */
+[data-theme="dark"] .feel-playground__result.bool-true  { color: #4ec9b0; }
+[data-theme="dark"] .feel-playground__result.bool-false { color: #ce9178; }
+[data-theme="dark"] .feel-playground__result.number     { color: #b5cea8; }
+[data-theme="dark"] .feel-playground__result.string     { color: #ce9178; }
+
+.feel-playground__errors {
+  font-size: 11px;
+  color: var(--fp-error-text);
+  padding: 4px 6px;
+  background: var(--fp-error-bg);
+  border-radius: 3px;
+  font-family: system-ui, sans-serif;
+}
+
+.feel-playground__examples {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.feel-playground__examples select {
+  flex: 1;
+  background: var(--fp-select-bg);
+  border: 1px solid var(--fp-border);
+  color: var(--fp-text);
+  padding: 3px 6px;
+  border-radius: 3px;
+  font-size: 12px;
+  font-family: system-ui, sans-serif;
+}
+
+/* ── FEEL syntax highlighting — light theme ───────────────────────── */
+.feel-keyword         { color: #0000cc; }
+.feel-operator        { color: #555555; }
+.feel-literal-number  { color: #09885a; }
+.feel-literal-string  { color: #a31515; }
+.feel-literal-temporal{ color: #0070c1; }
+.feel-literal-bool    { color: #0000cc; }
+.feel-literal-null    { color: #0000cc; }
+.feel-builtin         { color: #795e26; }
+.feel-variable        { color: #001080; }
+.feel-comment         { color: #008000; font-style: italic; }
+.feel-punctuation     { color: #555555; }
+
+/* ── FEEL syntax highlighting — dark theme ────────────────────────── */
+[data-theme="dark"] .feel-keyword          { color: #569cd6; }
+[data-theme="dark"] .feel-operator         { color: #d4d4d4; }
+[data-theme="dark"] .feel-literal-number   { color: #b5cea8; }
+[data-theme="dark"] .feel-literal-string   { color: #ce9178; }
+[data-theme="dark"] .feel-literal-temporal { color: #4ec9b0; }
+[data-theme="dark"] .feel-literal-bool     { color: #569cd6; }
+[data-theme="dark"] .feel-literal-null     { color: #569cd6; }
+[data-theme="dark"] .feel-builtin          { color: #dcdcaa; }
+[data-theme="dark"] .feel-variable         { color: #9cdcfe; }
+[data-theme="dark"] .feel-comment          { color: #6a9955; font-style: italic; }
+[data-theme="dark"] .feel-punctuation      { color: #d4d4d4; }
+`;
+export function injectPlaygroundStyles() {
+    if (document.getElementById(FEEL_PLAYGROUND_STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = FEEL_PLAYGROUND_STYLE_ID;
+    style.textContent = FEEL_PLAYGROUND_CSS;
+    document.head.appendChild(style);
+}
+//# sourceMappingURL=css.js.map

package/dist/feel-playground/index.d.ts

@@ -0,0 +1,4 @@
+export { buildFeelPlaygroundPanel, createFeelPlaygroundPlugin } from "./playground-plugin.js";
+export type { FeelPlaygroundPlugin } from "./playground-plugin.js";
+export { FEEL_PLAYGROUND_CSS, FEEL_PLAYGROUND_STYLE_ID, injectPlaygroundStyles } from "./css.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/feel-playground/index.js

@@ -0,0 +1,3 @@
+export { buildFeelPlaygroundPanel, createFeelPlaygroundPlugin } from "./playground-plugin.js";
+export { FEEL_PLAYGROUND_CSS, FEEL_PLAYGROUND_STYLE_ID, injectPlaygroundStyles } from "./css.js";
+//# sourceMappingURL=index.js.map

package/dist/feel-playground/playground-plugin.d.ts

@@ -0,0 +1,14 @@
+import type { CanvasPlugin } from "@bpmnkit/canvas";
+export interface FeelPlaygroundPlugin extends CanvasPlugin {
+    /** Show the FEEL Playground panel. */
+    show(): void;
+}
+/**
+ * Builds the FEEL Playground panel DOM.
+ * When `onClose` is provided a close button is rendered that calls it.
+ * Omit `onClose` when embedding in a full-screen tab.
+ * Pass `initialExpression` to pre-fill the expression textarea.
+ */
+export declare function buildFeelPlaygroundPanel(onClose?: () => void, initialExpression?: string): HTMLDivElement;
+export declare function createFeelPlaygroundPlugin(): FeelPlaygroundPlugin;
+//# sourceMappingURL=playground-plugin.d.ts.map

package/dist/feel-playground/playground-plugin.js

@@ -0,0 +1,292 @@
+import { evaluate, evaluateUnaryTests, highlightToHtml, parseExpression, parseUnaryTests, } from "@bpmnkit/feel";
+import { injectPlaygroundStyles } from "./css.js";
+const EXAMPLES = [
+    { label: "Arithmetic", expr: "1 + 2 * 3", context: "{}", mode: "expression" },
+    { label: "String ops", expr: 'string length("Hello FEEL")', context: "{}", mode: "expression" },
+    { label: "List ops", expr: "sum([1, 2, 3, 4, 5])", context: "{}", mode: "expression" },
+    {
+        label: "Context access",
+        expr: "order.amount * 1.1",
+        context: '{"order": {"amount": 100}}',
+        mode: "expression",
+    },
+    {
+        label: "If-then-else",
+        expr: 'if age >= 18 then "adult" else "minor"',
+        context: '{"age": 20}',
+        mode: "expression",
+    },
+    {
+        label: "For expression",
+        expr: "for x in [1, 2, 3] return x * x",
+        context: "{}",
+        mode: "expression",
+    },
+    { label: "Temporal", expr: 'date("2021-01-15").month', context: "{}", mode: "expression" },
+    { label: "Unary tests — range", expr: "[18..65]", context: '{"?": 30}', mode: "unary-tests" },
+    {
+        label: "Unary tests — list",
+        expr: '"visa", "master"',
+        context: '{"?": "visa"}',
+        mode: "unary-tests",
+    },
+    {
+        label: "Contains filter",
+        expr: "items[item > 2]",
+        context: '{"items": [1, 2, 3, 4]}',
+        mode: "expression",
+    },
+];
+function renderValue(v) {
+    if (v === null)
+        return { html: "null", cssClass: "null-val" };
+    if (typeof v === "boolean")
+        return { html: String(v), cssClass: v ? "bool-true" : "bool-false" };
+    if (typeof v === "number")
+        return { html: String(v), cssClass: "number" };
+    if (typeof v === "string")
+        return { html: `"${v}"`, cssClass: "string" };
+    if (Array.isArray(v))
+        return { html: JSON.stringify(v, null, 2), cssClass: "" };
+    return { html: JSON.stringify(v, null, 2), cssClass: "" };
+}
+/**
+ * Builds the FEEL Playground panel DOM.
+ * When `onClose` is provided a close button is rendered that calls it.
+ * Omit `onClose` when embedding in a full-screen tab.
+ * Pass `initialExpression` to pre-fill the expression textarea.
+ */
+export function buildFeelPlaygroundPanel(onClose, initialExpression) {
+    let mode = "expression";
+    let exprEl = null;
+    let contextEl = null;
+    let resultEl = null;
+    let errorsEl = null;
+    let highlightEl = null;
+    function evaluate_() {
+        if (!exprEl || !contextEl || !resultEl || !errorsEl)
+            return;
+        const src = exprEl.value;
+        let vars = {};
+        try {
+            const parsed = JSON.parse(contextEl.value || "{}");
+            vars = parsed;
+        }
+        catch {
+            errorsEl.textContent = "Invalid JSON context";
+            return;
+        }
+        if (mode === "expression") {
+            const { ast, errors } = parseExpression(src);
+            if (errors.length > 0) {
+                errorsEl.textContent = errors.map((e) => e.message).join("; ");
+                resultEl.className = "feel-playground__result";
+                resultEl.textContent = "";
+                return;
+            }
+            errorsEl.textContent = "";
+            if (!ast)
+                return;
+            const val = evaluate(ast, { vars });
+            const { html, cssClass } = renderValue(val);
+            resultEl.className = `feel-playground__result ${cssClass}`;
+            resultEl.innerHTML = html;
+        }
+        else {
+            const input = vars["?"] ?? null;
+            const { ast, errors } = parseUnaryTests(src);
+            if (errors.length > 0) {
+                errorsEl.textContent = errors.map((e) => e.message).join("; ");
+                return;
+            }
+            errorsEl.textContent = "";
+            if (!ast)
+                return;
+            const result = evaluateUnaryTests(ast, input, { vars, input });
+            const { html, cssClass } = renderValue(result);
+            resultEl.className = `feel-playground__result ${cssClass}`;
+            resultEl.innerHTML = html;
+        }
+    }
+    function updateHighlight() {
+        if (!exprEl || !highlightEl)
+            return;
+        const html = highlightToHtml(exprEl.value);
+        highlightEl.innerHTML = html;
+        highlightEl.scrollTop = exprEl.scrollTop;
+        highlightEl.scrollLeft = exprEl.scrollLeft;
+    }
+    const div = document.createElement("div");
+    div.className = "feel-playground";
+    // Header
+    const header = document.createElement("div");
+    header.className = "feel-playground__header";
+    const title = document.createElement("span");
+    title.className = "feel-playground__title";
+    title.textContent = "FEEL Playground";
+    const modeDiv = document.createElement("div");
+    modeDiv.className = "feel-playground__mode";
+    const exprBtn = document.createElement("button");
+    exprBtn.textContent = "Expression";
+    exprBtn.className = "active"; // mode starts as "expression"
+    exprBtn.addEventListener("click", () => {
+        mode = "expression";
+        exprBtn.className = "active";
+        utBtn.className = "";
+        evaluate_();
+    });
+    const utBtn = document.createElement("button");
+    utBtn.textContent = "Unary Tests";
+    utBtn.className = ""; // mode starts as "expression", so utBtn starts inactive
+    utBtn.addEventListener("click", () => {
+        mode = "unary-tests";
+        utBtn.className = "active";
+        exprBtn.className = "";
+        evaluate_();
+    });
+    modeDiv.appendChild(exprBtn);
+    modeDiv.appendChild(utBtn);
+    header.appendChild(title);
+    header.appendChild(modeDiv);
+    if (onClose) {
+        const closeBtn = document.createElement("button");
+        closeBtn.className = "feel-playground__close";
+        closeBtn.textContent = "×";
+        closeBtn.addEventListener("click", onClose);
+        header.appendChild(closeBtn);
+    }
+    // Body
+    const body = document.createElement("div");
+    body.className = "feel-playground__body";
+    // Examples
+    const examplesRow = document.createElement("div");
+    examplesRow.className = "feel-playground__examples";
+    const exLabel = document.createElement("span");
+    exLabel.className = "feel-playground__label";
+    exLabel.textContent = "Examples:";
+    const select = document.createElement("select");
+    const defaultOpt = document.createElement("option");
+    defaultOpt.value = "";
+    defaultOpt.textContent = "— pick an example —";
+    select.appendChild(defaultOpt);
+    for (let i = 0; i < EXAMPLES.length; i++) {
+        const ex = EXAMPLES[i];
+        if (!ex)
+            continue;
+        const opt = document.createElement("option");
+        opt.value = String(i);
+        opt.textContent = ex.label;
+        select.appendChild(opt);
+    }
+    select.addEventListener("change", () => {
+        const idx = Number(select.value);
+        const ex = EXAMPLES[idx];
+        if (!ex || !exprEl || !contextEl)
+            return;
+        mode = ex.mode;
+        exprBtn.className = mode === "expression" ? "active" : "";
+        utBtn.className = mode === "unary-tests" ? "active" : "";
+        exprEl.value = ex.expr;
+        contextEl.value = ex.context;
+        updateHighlight();
+        evaluate_();
+        select.value = "";
+    });
+    examplesRow.appendChild(exLabel);
+    examplesRow.appendChild(select);
+    // Expression input
+    const exprLabel = document.createElement("div");
+    exprLabel.className = "feel-playground__label";
+    exprLabel.textContent = "Expression";
+    const inputWrap = document.createElement("div");
+    inputWrap.className = "feel-playground__input-wrap";
+    highlightEl = document.createElement("div");
+    highlightEl.className = "feel-playground__highlight";
+    exprEl = document.createElement("textarea");
+    exprEl.className = "feel-playground__textarea";
+    exprEl.rows = 3;
+    exprEl.spellcheck = false;
+    exprEl.placeholder = "Enter FEEL expression...";
+    exprEl.addEventListener("input", () => {
+        updateHighlight();
+        evaluate_();
+    });
+    exprEl.addEventListener("scroll", () => {
+        if (!highlightEl || !exprEl)
+            return;
+        highlightEl.scrollTop = exprEl.scrollTop;
+    });
+    if (initialExpression)
+        exprEl.value = initialExpression;
+    inputWrap.appendChild(highlightEl);
+    inputWrap.appendChild(exprEl);
+    // Context input
+    const ctxLabel = document.createElement("div");
+    ctxLabel.className = "feel-playground__label";
+    ctxLabel.textContent = "Context (JSON)";
+    contextEl = document.createElement("textarea");
+    contextEl.className = "feel-playground__context";
+    contextEl.rows = 3;
+    contextEl.value = "{}";
+    contextEl.spellcheck = false;
+    contextEl.placeholder = '{"x": 10}';
+    contextEl.addEventListener("input", evaluate_);
+    // Errors
+    errorsEl = document.createElement("div");
+    errorsEl.className = "feel-playground__errors";
+    errorsEl.style.display = "none";
+    const errObserver = new MutationObserver(() => {
+        if (!errorsEl)
+            return;
+        errorsEl.style.display = errorsEl.textContent?.trim() ? "" : "none";
+    });
+    errObserver.observe(errorsEl, { childList: true, characterData: true, subtree: true });
+    // Result
+    const resultLabel = document.createElement("div");
+    resultLabel.className = "feel-playground__label";
+    resultLabel.textContent = "Result";
+    resultEl = document.createElement("div");
+    resultEl.className = "feel-playground__result";
+    body.appendChild(examplesRow);
+    body.appendChild(exprLabel);
+    body.appendChild(inputWrap);
+    body.appendChild(ctxLabel);
+    body.appendChild(contextEl);
+    body.appendChild(errorsEl);
+    body.appendChild(resultLabel);
+    body.appendChild(resultEl);
+    div.appendChild(header);
+    div.appendChild(body);
+    if (initialExpression) {
+        updateHighlight();
+        evaluate_();
+    }
+    return div;
+}
+export function createFeelPlaygroundPlugin() {
+    let overlay = null;
+    return {
+        name: "feel-playground",
+        install(api) {
+            injectPlaygroundStyles();
+            overlay = document.createElement("div");
+            overlay.className = "feel-playground-overlay";
+            overlay.style.display = "none";
+            overlay.appendChild(buildFeelPlaygroundPanel(() => {
+                if (overlay)
+                    overlay.style.display = "none";
+            }));
+            api.container.style.position = "relative";
+            api.container.appendChild(overlay);
+        },
+        uninstall() {
+            overlay?.remove();
+            overlay = null;
+        },
+        show() {
+            if (overlay)
+                overlay.style.display = "";
+        },
+    };
+}
+//# sourceMappingURL=playground-plugin.js.map

package/dist/form-editor/css.d.ts

@@ -0,0 +1,3 @@
+export declare const FORM_EDITOR_CSS: string;
+export declare function injectFormEditorStyles(): void;
+//# sourceMappingURL=css.d.ts.map