@ttsc/playground 0.14.0-dev.20250530.1

package/lib/src/react/OptionsPanel.js

@@ -0,0 +1,43 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionsPanel = OptionsPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const DEFAULT_OPTION_TOGGLES_1 = require("./DEFAULT_OPTION_TOGGLES");
+function OptionsPanel({ options, onChange, onClose, toggles = DEFAULT_OPTION_TOGGLES_1.DEFAULT_OPTION_TOGGLES, title = "Transform Options", }) {
+    const dialogRef = (0, react_1.useRef)(null);
+    const toggle = (key) => onChange({ ...options, [key]: !options[key] });
+    // Escape closes. Focus traps inside the dialog.
+    (0, react_1.useEffect)(() => {
+        const onKey = (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                onClose();
+                return;
+            }
+            if (e.key !== "Tab" || !dialogRef.current)
+                return;
+            const focusable = dialogRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+            if (focusable.length === 0)
+                return;
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            if (e.shiftKey && document.activeElement === first) {
+                e.preventDefault();
+                last.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === last) {
+                e.preventDefault();
+                first.focus();
+            }
+        };
+        window.addEventListener("keydown", onKey);
+        // Auto-focus the first focusable on mount.
+        const focusable = dialogRef.current?.querySelector('button, input, [tabindex]:not([tabindex="-1"])');
+        focusable?.focus();
+        return () => window.removeEventListener("keydown", onKey);
+    }, [onClose]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center", onClick: onClose, children: (0, jsx_runtime_1.jsxs)("div", { ref: dialogRef, role: "dialog", "aria-modal": "true", "aria-labelledby": "playground-options-title", className: "w-[480px] max-w-[90vw] rounded-2xl border border-neutral-800 bg-neutral-950 shadow-[0_30px_80px_rgba(0,0,0,0.7)]", onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-neutral-800/70", children: [(0, jsx_runtime_1.jsx)("h2", { id: "playground-options-title", className: "text-base font-semibold text-white", children: title }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "text-neutral-500 hover:text-white transition-colors", "aria-label": "Close options", children: "\u2715" })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-6 space-y-6", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-[10px] font-mono uppercase tracking-wider text-neutral-600 mb-3", children: "Plugins" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: toggles.map((t) => ((0, jsx_runtime_1.jsxs)("label", { className: "flex items-start gap-3 cursor-pointer group", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: !!options[t.key], onChange: () => toggle(t.key), className: "mt-1 w-4 h-4 accent-blue-500" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-mono text-neutral-100 group-hover:text-white transition-colors", children: t.label }), (0, jsx_runtime_1.jsx)("div", { className: "text-[11px] text-neutral-500 leading-snug", children: t.description })] })] }, t.key))) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "px-6 py-4 border-t border-neutral-800/70 flex justify-end", children: (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "px-4 py-2 text-xs font-mono text-neutral-900 bg-white rounded-md hover:shadow-[0_0_30px_rgba(255,255,255,0.2)] transition-shadow", children: "Done" }) })] }) }));
+}
+//# sourceMappingURL=OptionsPanel.js.map

package/lib/src/react/OptionsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsPanel.js","sourceRoot":"","sources":["../../../src/react/OptionsPanel.tsx"],"names":[],"mappings":"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"}

package/lib/src/react/PlaygroundShell.d.ts

@@ -0,0 +1,2 @@
+import type { IPlaygroundShellProps } from "../structures/IPlaygroundShellProps";
+export declare function PlaygroundShell({ workerUrl, defaultScript, examples, exampleGroupLabels, optionToggles, defaultOptions, staticEditorLibs, preinstalledPackages, executeBundle, brand, resultCaption, }: IPlaygroundShellProps): import("react/jsx-runtime").JSX.Element;