socialcalc-ai 1.0.0

package/components/HorizontalScrollBar.tsx

@@ -0,0 +1,140 @@
+import React, { useEffect, useState, useCallback } from "react";
+import {
+  getHorizontalScrollInfo,
+  scrollToColumn,
+  scrollHorizontalBy,
+  subscribeHorizontalScroll
+} from "../modules/horizontal-scroll.js";
+import "./HorizontalScrollBar.css";
+
+export interface HorizontalScrollBarProps {
+  /** Optional custom step size for arrow button clicks (default: 1) */
+  step?: number;
+  /** Optional CSS class name */
+  className?: string;
+  /** Optional callback when column changes */
+  onColumnChange?: (colInfo: { firstCol: number; colName: string; totalCols: number }) => void;
+}
+
+export const HorizontalScrollBar: React.FC<HorizontalScrollBarProps> = ({
+  step = 1,
+  className = "",
+  onColumnChange
+}) => {
+  const [scrollInfo, setScrollInfo] = useState(() => getHorizontalScrollInfo());
+
+  // Subscribe to external scroll events (e.g. from gestures or programmatic scrolls)
+  useEffect(() => {
+    // Initial sync
+    setScrollInfo(getHorizontalScrollInfo());
+
+    const unsubscribe = subscribeHorizontalScroll((info) => {
+      setScrollInfo(info);
+      if (onColumnChange) {
+        onColumnChange({
+          firstCol: info.currentFirstCol,
+          colName: info.currentColName,
+          totalCols: info.totalCols
+        });
+      }
+    });
+
+    // Also listen to custom window events for extra compatibility
+    const handleCustomScroll = (e: any) => {
+      if (e.detail) {
+        setScrollInfo(e.detail);
+      }
+    };
+    window.addEventListener("socialcalc:horizontal-scroll", handleCustomScroll);
+
+    // Periodic check to keep in sync if canvas/DOM scrolls without direct event
+    const timer = setInterval(() => {
+      const current = getHorizontalScrollInfo();
+      setScrollInfo((prev) => {
+        if (
+          prev.currentFirstCol !== current.currentFirstCol ||
+          prev.totalCols !== current.totalCols
+        ) {
+          return current;
+        }
+        return prev;
+      });
+    }, 400);
+
+    return () => {
+      unsubscribe();
+      window.removeEventListener("socialcalc:horizontal-scroll", handleCustomScroll);
+      clearInterval(timer);
+    };
+  }, [onColumnChange]);
+
+  const handlePrev = useCallback(() => {
+    scrollHorizontalBy(-step);
+  }, [step]);
+
+  const handleNext = useCallback(() => {
+    scrollHorizontalBy(step);
+  }, [step]);
+
+  const handleSliderChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = parseInt(e.target.value, 10);
+    scrollToColumn(val);
+  }, []);
+
+  const isAtStart = scrollInfo.currentFirstCol <= 1;
+  const isAtEnd = scrollInfo.currentFirstCol >= scrollInfo.totalCols;
+
+  return (
+    <div className={`sc-hscroll-container ${className}`}>
+      {/* Left Arrow Button */}
+      <button
+        type="button"
+        className="sc-hscroll-btn"
+        onClick={handlePrev}
+        disabled={isAtStart}
+        title={`Scroll Left (${step} Column)`}
+        aria-label="Scroll Left"
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+      </button>
+
+      {/* Slider and Pill */}
+      <div className="sc-hscroll-track-wrapper">
+        <input
+          type="range"
+          className="sc-hscroll-slider"
+          min={1}
+          max={scrollInfo.totalCols}
+          value={scrollInfo.currentFirstCol}
+          onChange={handleSliderChange}
+          aria-label="Horizontal Column Slider"
+        />
+
+        <div className="sc-hscroll-indicator">
+          <span>Col {scrollInfo.currentColName}</span>
+          <span style={{ opacity: 0.65, fontSize: "10px" }}>
+            ({scrollInfo.currentFirstCol}/{scrollInfo.totalCols})
+          </span>
+        </div>
+      </div>
+
+      {/* Right Arrow Button */}
+      <button
+        type="button"
+        className="sc-hscroll-btn"
+        onClick={handleNext}
+        disabled={isAtEnd}
+        title={`Scroll Right (${step} Column)`}
+        aria-label="Scroll Right"
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+      </button>
+    </div>
+  );
+};
+
+export default HorizontalScrollBar;

package/components/RowActionPopover/RowActionPopover.css

@@ -0,0 +1,95 @@
+/* Row Action Popover Styles — Clean, Professional */
+
+.sc-row-popover-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  background: transparent;
+}
+
+.sc-row-popover-menu {
+  position: fixed;
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
+  padding: 4px;
+  min-width: 160px;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  animation: scPopoverFade 0.12s ease-out;
+}
+
+@keyframes scPopoverFade {
+  from { opacity: 0; transform: translateY(-2px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.sc-row-popover-header {
+  padding: 6px 10px 4px 10px;
+}
+
+.sc-row-popover-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: #94a3b8;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.sc-row-popover-divider {
+  height: 1px;
+  background: #e2e8f0;
+  margin: 2px 6px;
+}
+
+.sc-row-popover-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  border-radius: 5px;
+  border: none;
+  background: transparent;
+  color: #334155;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  transition: background 0.1s ease;
+}
+
+.sc-row-popover-item:hover {
+  background: #f1f5f9;
+}
+
+.sc-row-popover-item:active {
+  background: #e2e8f0;
+}
+
+.sc-row-popover-item.danger {
+  color: #dc2626;
+}
+
+.sc-row-popover-item.danger:hover {
+  background: #fef2f2;
+}
+
+.sc-row-popover-icon {
+  font-size: 14px;
+  font-weight: 700;
+  width: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #94a3b8;
+}
+
+.sc-row-popover-item.danger .sc-row-popover-icon {
+  color: #dc2626;
+}

package/components/RowActionPopover/RowActionPopover.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import "./RowActionPopover.css";
+
+export interface RowActionPopoverProps {
+  isOpen: boolean;
+  rowNum: number | null;
+  position: { x: number; y: number } | null;
+  onClose: () => void;
+  onInsertAbove: (rowNum: number) => void;
+  onInsertBelow: (rowNum: number) => void;
+  onDeleteRow: (rowNum: number) => void;
+}
+
+export const RowActionPopover: React.FC<RowActionPopoverProps> = ({
+  isOpen,
+  rowNum,
+  position,
+  onClose,
+  onInsertAbove,
+  onInsertBelow,
+  onDeleteRow,
+}) => {
+  if (!isOpen || rowNum === null || !position) return null;
+
+  // Ensure popover stays within viewport bounds
+  const left = Math.min(window.innerWidth - 200, Math.max(10, position.x + 8));
+  const top = Math.min(window.innerHeight - 180, Math.max(10, position.y - 10));
+
+  return (
+    <>
+      <div className="sc-row-popover-backdrop" onClick={onClose} />
+      <div
+        className="sc-row-popover-menu"
+        style={{ left: `${left}px`, top: `${top}px` }}
+      >
+        <div className="sc-row-popover-header">
+          <span className="sc-row-popover-title">Row {rowNum}</span>
+        </div>
+
+        <button
+          type="button"
+          className="sc-row-popover-item"
+          onClick={() => {
+            onInsertAbove(rowNum);
+            onClose();
+          }}
+        >
+          <span className="sc-row-popover-icon">+</span>
+          <span>Insert above</span>
+        </button>
+
+        <button
+          type="button"
+          className="sc-row-popover-item"
+          onClick={() => {
+            onInsertBelow(rowNum);
+            onClose();
+          }}
+        >
+          <span className="sc-row-popover-icon">+</span>
+          <span>Insert below</span>
+        </button>
+
+        <div className="sc-row-popover-divider" />
+
+        <button
+          type="button"
+          className="sc-row-popover-item danger"
+          onClick={() => {
+            onDeleteRow(rowNum);
+            onClose();
+          }}
+        >
+          <span className="sc-row-popover-icon">&minus;</span>
+          <span>Delete row</span>
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default RowActionPopover;