@mdxui/terminal 2.0.0

package/dist/storybook/index.js

@@ -0,0 +1,641 @@
+import {
+  createInteractiveRenderer
+} from "../chunk-LHYQVN3H.js";
+import "../chunk-3RG5ZIWI.js";
+
+// src/storybook/keyboard-simulator.ts
+var KeySequence = {
+  /** Navigate down one item */
+  NAVIGATE_DOWN: [{ key: "down" }],
+  /** Navigate down three items */
+  NAVIGATE_DOWN_3: [
+    { key: "down" },
+    { key: "down" },
+    { key: "down" }
+  ],
+  /** Navigate up one item */
+  NAVIGATE_UP: [{ key: "up" }],
+  /** Navigate up three items */
+  NAVIGATE_UP_3: [
+    { key: "up" },
+    { key: "up" },
+    { key: "up" }
+  ],
+  /** Tab forward through focusables */
+  TAB_FORWARD: [{ key: "tab" }],
+  /** Tab forward three times */
+  TAB_FORWARD_3: [
+    { key: "tab" },
+    { key: "tab" },
+    { key: "tab" }
+  ],
+  /** Tab backward through focusables */
+  TAB_BACKWARD: [{ key: "tab", modifiers: { shift: true } }],
+  /** Tab backward three times */
+  TAB_BACKWARD_3: [
+    { key: "tab", modifiers: { shift: true } },
+    { key: "tab", modifiers: { shift: true } },
+    { key: "tab", modifiers: { shift: true } }
+  ],
+  /** Select/activate focused element */
+  SELECT: [{ key: "enter" }],
+  /** Toggle focused element (e.g., checkbox) */
+  TOGGLE: [{ key: "space" }],
+  /** Cancel/escape current action */
+  CANCEL: [{ key: "escape" }],
+  /** Navigate to first item (vim: gg) */
+  GOTO_FIRST: [{ key: "g" }, { key: "g" }],
+  /** Navigate to last item (vim: G) */
+  GOTO_LAST: [{ key: "G", modifiers: { shift: true } }],
+  /** Open search mode (vim: /) */
+  SEARCH: [{ key: "/" }],
+  /** Navigate down and select */
+  NAVIGATE_DOWN_SELECT: [{ key: "down" }, { key: "enter" }],
+  /** Navigate to next item using j (vim) */
+  VIM_DOWN: [{ key: "j" }],
+  /** Navigate to previous item using k (vim) */
+  VIM_UP: [{ key: "k" }],
+  /** Navigate left using h (vim) */
+  VIM_LEFT: [{ key: "h" }],
+  /** Navigate right using l (vim) */
+  VIM_RIGHT: [{ key: "l" }],
+  /** Delete sequence (vim: dd) */
+  VIM_DELETE: [{ key: "d" }, { key: "d" }],
+  /** Home key - jump to beginning */
+  HOME: [{ key: "home" }],
+  /** End key - jump to end */
+  END: [{ key: "end" }],
+  /** Page down */
+  PAGE_DOWN: [{ key: "pagedown" }],
+  /** Page up */
+  PAGE_UP: [{ key: "pageup" }],
+  /** Ctrl+C - cancel/interrupt */
+  INTERRUPT: [{ key: "c", modifiers: { ctrl: true } }],
+  /** Ctrl+S - save */
+  SAVE: [{ key: "s", modifiers: { ctrl: true } }]
+};
+function toBindingString(key, modifiers) {
+  const parts = [];
+  if (modifiers?.ctrl) parts.push("ctrl");
+  if (modifiers?.alt) parts.push("alt");
+  if (modifiers?.shift) parts.push("shift");
+  if (modifiers?.meta) parts.push("meta");
+  parts.push(key.toLowerCase());
+  return parts.join("+");
+}
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function createKeyboardSimulator(config) {
+  const { renderer, defaultDelay = 0, onKeyPress, onSequenceComplete } = config;
+  const pressedKeys = [];
+  const simulator = {
+    press(key, modifiers) {
+      const bindingString = toBindingString(key, modifiers);
+      pressedKeys.push(bindingString);
+      onKeyPress?.(key, modifiers ?? {});
+      renderer.emitKey(bindingString);
+    },
+    async pressAsync(key, modifiers) {
+      this.press(key, modifiers);
+      if (defaultDelay > 0) {
+        await sleep(defaultDelay);
+      }
+    },
+    sequence(keys) {
+      for (const keyPress of keys) {
+        this.press(keyPress.key, keyPress.modifiers);
+      }
+      onSequenceComplete?.(keys);
+    },
+    async sequenceAsync(keys) {
+      for (const keyPress of keys) {
+        const delay = keyPress.delay ?? defaultDelay;
+        if (delay > 0) {
+          await sleep(delay);
+        }
+        this.press(keyPress.key, keyPress.modifiers);
+      }
+      onSequenceComplete?.(keys);
+    },
+    type(text) {
+      for (const char of text) {
+        if (char === "\n") {
+          this.press("enter");
+        } else if (char === "	") {
+          this.press("tab");
+        } else if (char === " ") {
+          this.press("space");
+        } else {
+          const isUpperCase = char === char.toUpperCase() && char !== char.toLowerCase();
+          this.press(char, isUpperCase ? { shift: true } : void 0);
+        }
+      }
+    },
+    async typeAsync(text, charDelay = 50) {
+      for (const char of text) {
+        if (charDelay > 0) {
+          await sleep(charDelay);
+        }
+        if (char === "\n") {
+          this.press("enter");
+        } else if (char === "	") {
+          this.press("tab");
+        } else if (char === " ") {
+          this.press("space");
+        } else {
+          const isUpperCase = char === char.toUpperCase() && char !== char.toLowerCase();
+          this.press(char, isUpperCase ? { shift: true } : void 0);
+        }
+      }
+    },
+    reset() {
+      this.clearHistory();
+    },
+    getPressedKeys() {
+      return [...pressedKeys];
+    },
+    clearHistory() {
+      pressedKeys.length = 0;
+    }
+  };
+  return simulator;
+}
+function expectKeyPressed(simulator, key, modifiers) {
+  const bindingString = toBindingString(key, modifiers);
+  const pressedKeys = simulator.getPressedKeys();
+  if (!pressedKeys.includes(bindingString)) {
+    throw new Error(
+      `Expected key "${bindingString}" to be pressed, but it was not. Pressed keys: [${pressedKeys.join(", ")}]`
+    );
+  }
+}
+function expectSequencePressed(simulator, sequence) {
+  const pressedKeys = simulator.getPressedKeys();
+  const expectedKeys = sequence.map((kp) => toBindingString(kp.key, kp.modifiers));
+  let found = false;
+  for (let i = 0; i <= pressedKeys.length - expectedKeys.length; i++) {
+    let match = true;
+    for (let j = 0; j < expectedKeys.length; j++) {
+      if (pressedKeys[i + j] !== expectedKeys[j]) {
+        match = false;
+        break;
+      }
+    }
+    if (match) {
+      found = true;
+      break;
+    }
+  }
+  if (!found) {
+    throw new Error(
+      `Expected sequence [${expectedKeys.join(", ")}] to be pressed in order, but it was not. Pressed keys: [${pressedKeys.join(", ")}]`
+    );
+  }
+}
+function expectNoKeysPressed(simulator) {
+  const pressedKeys = simulator.getPressedKeys();
+  if (pressedKeys.length > 0) {
+    throw new Error(
+      `Expected no keys to be pressed, but found: [${pressedKeys.join(", ")}]`
+    );
+  }
+}
+function expectKeyPressCount(simulator, count) {
+  const pressedKeys = simulator.getPressedKeys();
+  if (pressedKeys.length !== count) {
+    throw new Error(
+      `Expected ${count} key press(es), but found ${pressedKeys.length}. Pressed keys: [${pressedKeys.join(", ")}]`
+    );
+  }
+}
+function mapDOMKeyEvent(event) {
+  let key = event.key.toLowerCase();
+  const keyMap = {
+    arrowup: "up",
+    arrowdown: "down",
+    arrowleft: "left",
+    arrowright: "right",
+    " ": "space",
+    return: "enter"
+  };
+  key = keyMap[key] ?? key;
+  return {
+    key,
+    modifiers: {
+      ctrl: event.ctrlKey,
+      alt: event.altKey,
+      shift: event.shiftKey,
+      meta: event.metaKey
+    }
+  };
+}
+function createDOMKeyHandler(simulator, options) {
+  const { preventDefault = true, stopPropagation = true, ignoreKeys = [] } = options ?? {};
+  return (event) => {
+    const keyPress = mapDOMKeyEvent(event);
+    if (ignoreKeys.includes(keyPress.key)) {
+      return;
+    }
+    if (preventDefault) {
+      event.preventDefault();
+    }
+    if (stopPropagation) {
+      event.stopPropagation();
+    }
+    simulator.press(keyPress.key, keyPress.modifiers);
+  };
+}
+
+// src/storybook/interactive-decorator.tsx
+import React, { useEffect, useState, useCallback, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var InteractiveContext = React.createContext({
+  renderer: null,
+  simulator: null,
+  keyLog: [],
+  focusedId: null,
+  clearKeyLog: () => {
+  }
+});
+function useInteractiveContext() {
+  return React.useContext(InteractiveContext);
+}
+function KeyLogPanel({ keyLog, focusedId, onClear }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        bottom: "16px",
+        right: "16px",
+        width: "240px",
+        maxHeight: "200px",
+        backgroundColor: "rgba(0, 0, 0, 0.85)",
+        color: "#e5e5e5",
+        borderRadius: "8px",
+        padding: "12px",
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+        fontSize: "12px",
+        zIndex: 9999,
+        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: "8px",
+              paddingBottom: "8px",
+              borderBottom: "1px solid rgba(255, 255, 255, 0.1)"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "#a3e635" }, children: "Keyboard Log" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: onClear,
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    color: "#737373",
+                    cursor: "pointer",
+                    fontSize: "11px",
+                    padding: "2px 6px"
+                  },
+                  children: "Clear"
+                }
+              )
+            ]
+          }
+        ),
+        focusedId && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginBottom: "8px",
+              padding: "4px 8px",
+              backgroundColor: "rgba(163, 230, 53, 0.15)",
+              borderRadius: "4px",
+              color: "#a3e635"
+            },
+            children: [
+              "Focus: ",
+              /* @__PURE__ */ jsx("code", { style: { color: "#fde047" }, children: focusedId })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              maxHeight: "120px",
+              overflowY: "auto"
+            },
+            children: keyLog.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: "#737373", fontStyle: "italic" }, children: "Press keys to see log..." }) : keyLog.map((key, index) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  padding: "2px 0",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("span", { style: { color: "#737373" }, children: [
+                    index + 1,
+                    "."
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "code",
+                    {
+                      style: {
+                        backgroundColor: "rgba(255, 255, 255, 0.1)",
+                        padding: "1px 6px",
+                        borderRadius: "3px",
+                        color: "#60a5fa"
+                      },
+                      children: key
+                    }
+                  )
+                ]
+              },
+              `${key}-${index}`
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              marginTop: "8px",
+              paddingTop: "8px",
+              borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+              color: "#737373",
+              fontSize: "10px"
+            },
+            children: "Click container to focus. Use Tab, arrows, vim keys."
+          }
+        )
+      ]
+    }
+  );
+}
+function InteractiveContainer({
+  children,
+  config = {}
+}) {
+  const containerRef = useRef(null);
+  const [renderer, setRenderer] = useState(null);
+  const [simulator, setSimulator] = useState(null);
+  const [keyLog, setKeyLog] = useState([]);
+  const [focusedId, setFocusedId] = useState(null);
+  const {
+    showKeyLog = true,
+    maxKeyLogEntries = 20,
+    showFocusOverlay = false,
+    ignoreKeys = ["f5", "f12"],
+    autoFocus = true,
+    ...rendererConfig
+  } = config;
+  useEffect(() => {
+    let mounted = true;
+    async function init() {
+      const newRenderer = await createInteractiveRenderer(rendererConfig);
+      if (!mounted) {
+        newRenderer.destroy();
+        return;
+      }
+      const newSimulator = createKeyboardSimulator({
+        renderer: newRenderer,
+        onKeyPress: (key, modifiers) => {
+          const parts = [];
+          if (modifiers.ctrl) parts.push("Ctrl");
+          if (modifiers.alt) parts.push("Alt");
+          if (modifiers.shift) parts.push("Shift");
+          if (modifiers.meta) parts.push("Meta");
+          parts.push(key);
+          setKeyLog((prev) => {
+            const newLog = [...prev, parts.join("+")];
+            return newLog.slice(-maxKeyLogEntries);
+          });
+        }
+      });
+      setRenderer(newRenderer);
+      setSimulator(newSimulator);
+    }
+    init();
+    return () => {
+      mounted = false;
+      renderer?.destroy();
+    };
+  }, []);
+  useEffect(() => {
+    if (!renderer) return;
+    const interval = setInterval(() => {
+      const currentFocusedId = renderer.getFocusedId();
+      if (currentFocusedId !== focusedId) {
+        setFocusedId(currentFocusedId);
+      }
+    }, 100);
+    return () => clearInterval(interval);
+  }, [renderer, focusedId]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!simulator) return;
+      const handler = createDOMKeyHandler(simulator, {
+        preventDefault: true,
+        stopPropagation: true,
+        ignoreKeys
+      });
+      handler(event.nativeEvent);
+    },
+    [simulator, ignoreKeys]
+  );
+  const handleContainerFocus = useCallback(() => {
+    if (renderer && !renderer.getFocusedId()) {
+      renderer.focusNext();
+    }
+  }, [renderer]);
+  useEffect(() => {
+    if (autoFocus && containerRef.current) {
+      containerRef.current.focus();
+    }
+  }, [autoFocus, renderer]);
+  const clearKeyLog = useCallback(() => {
+    setKeyLog([]);
+    simulator?.clearHistory();
+  }, [simulator]);
+  const contextValue = {
+    renderer,
+    simulator,
+    keyLog,
+    focusedId,
+    clearKeyLog
+  };
+  return /* @__PURE__ */ jsx(InteractiveContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      onFocus: handleContainerFocus,
+      style: {
+        outline: "none",
+        minHeight: "100%",
+        position: "relative"
+      },
+      "data-interactive-container": "true",
+      children: [
+        children,
+        showKeyLog && /* @__PURE__ */ jsx(
+          KeyLogPanel,
+          {
+            keyLog,
+            focusedId,
+            onClear: clearKeyLog
+          }
+        ),
+        showFocusOverlay && focusedId && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              top: "16px",
+              left: "16px",
+              backgroundColor: "rgba(163, 230, 53, 0.9)",
+              color: "#000",
+              padding: "4px 8px",
+              borderRadius: "4px",
+              fontFamily: "ui-monospace, monospace",
+              fontSize: "11px",
+              fontWeight: 600,
+              zIndex: 9998
+            },
+            children: [
+              "Focused: ",
+              focusedId
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+var InteractiveDecorator = (Story, context) => {
+  const interactiveParams = context.parameters?.interactive;
+  return /* @__PURE__ */ jsx(InteractiveContainer, { config: interactiveParams, children: /* @__PURE__ */ jsx(Story, {}) });
+};
+function useKeyboardNavigation(config) {
+  const containerRef = useRef(null);
+  const [renderer, setRenderer] = useState(null);
+  const [simulator, setSimulator] = useState(null);
+  const [keyLog, setKeyLog] = useState([]);
+  const [focusedId, setFocusedId] = useState(null);
+  useEffect(() => {
+    let mounted = true;
+    async function init() {
+      const newRenderer = await createInteractiveRenderer(config);
+      if (!mounted) {
+        newRenderer.destroy();
+        return;
+      }
+      const newSimulator = createKeyboardSimulator({
+        renderer: newRenderer,
+        onKeyPress: (key, modifiers) => {
+          const parts = [];
+          if (modifiers.ctrl) parts.push("Ctrl");
+          if (modifiers.alt) parts.push("Alt");
+          if (modifiers.shift) parts.push("Shift");
+          if (modifiers.meta) parts.push("Meta");
+          parts.push(key);
+          setKeyLog((prev) => [...prev.slice(-19), parts.join("+")]);
+        }
+      });
+      setRenderer(newRenderer);
+      setSimulator(newSimulator);
+    }
+    init();
+    return () => {
+      mounted = false;
+      renderer?.destroy();
+    };
+  }, []);
+  useEffect(() => {
+    if (!renderer) return;
+    const interval = setInterval(() => {
+      setFocusedId(renderer.getFocusedId());
+    }, 100);
+    return () => clearInterval(interval);
+  }, [renderer]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!simulator) return;
+      const handler = createDOMKeyHandler(simulator, {
+        preventDefault: true,
+        stopPropagation: true
+      });
+      handler(event.nativeEvent);
+    },
+    [simulator]
+  );
+  const handleFocus = useCallback(() => {
+    if (renderer && !renderer.getFocusedId()) {
+      renderer.focusNext();
+    }
+  }, [renderer]);
+  const clearKeyLog = useCallback(() => {
+    setKeyLog([]);
+    simulator?.clearHistory();
+  }, [simulator]);
+  return {
+    renderer,
+    simulator,
+    keyLog,
+    focusedId,
+    clearKeyLog,
+    containerProps: {
+      ref: containerRef,
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocus,
+      style: { outline: "none" }
+    }
+  };
+}
+function simulateKeyboardDemo(simulator, steps) {
+  let cancelled = false;
+  const timeouts = [];
+  let cumulativeDelay = 0;
+  for (const step of steps) {
+    cumulativeDelay += step.delay;
+    const timeout = setTimeout(() => {
+      if (!cancelled) {
+        simulator.sequence(step.keys);
+      }
+    }, cumulativeDelay);
+    timeouts.push(timeout);
+  }
+  return () => {
+    cancelled = true;
+    timeouts.forEach((t) => clearTimeout(t));
+  };
+}
+export {
+  InteractiveContext,
+  InteractiveDecorator,
+  KeySequence,
+  createDOMKeyHandler,
+  createKeyboardSimulator,
+  expectKeyPressCount,
+  expectKeyPressed,
+  expectNoKeysPressed,
+  expectSequencePressed,
+  mapDOMKeyEvent,
+  simulateKeyboardDemo,
+  useInteractiveContext,
+  useKeyboardNavigation
+};