lytx 0.3.0

package/src/app/components/DashboardCard.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import React from "react";
+
+type HeadingTag = "h2" | "h3" | "h4";
+
+interface DashboardCardProps {
+  id?: string;
+  title?: React.ReactNode;
+  titleAs?: HeadingTag;
+  subtitle?: React.ReactNode;
+  actions?: React.ReactNode;
+  isUpdating?: boolean;
+  updatingLabel?: string;
+  empty?: boolean;
+  emptyState?: React.ReactNode;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const SpinnerIcon = ({ className }: { className?: string }) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+      className="opacity-25"
+    />
+    <path
+      className="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    />
+  </svg>
+);
+
+const UpdatingOverlay = ({ label = "Updating..." }: { label?: string }) => (
+  <div
+    role="status"
+    aria-live="polite"
+    className="pointer-events-none absolute inset-0 flex items-center justify-center bg-(--theme-card-bg) bg-opacity-60 z-10 rounded-lg"
+  >
+    <div className="flex items-center">
+      <SpinnerIcon className="w-5 h-5 text-(--theme-text-secondary) animate-spin" />
+      <span className="ml-3 text-(--theme-text-secondary)">{label}</span>
+    </div>
+  </div>
+);
+
+const DefaultEmptyState = () => (
+  <>
+    <p className="text-(--theme-text-secondary)">
+      No results match the current filters.
+    </p>
+    <p className="text-xs text-(--theme-text-secondary) mt-2">
+      Try clearing filters or expanding the date range.
+    </p>
+  </>
+);
+
+const BASE_CLASSES =
+  "bg-[var(--theme-card-bg)] border border-[var(--theme-card-border)] rounded-lg p-4 sm:p-6";
+
+export function DashboardCard({
+  id,
+  title,
+  titleAs: TitleTag = "h2",
+  subtitle,
+  actions,
+  isUpdating,
+  updatingLabel,
+  empty,
+  emptyState,
+  className = "",
+  children,
+}: DashboardCardProps) {
+  const needsRelative = Boolean(isUpdating);
+
+  return (
+    <div
+      id={id}
+      className={`${BASE_CLASSES} ${needsRelative ? "relative" : ""} ${className}`}
+    >
+      {(title || actions) && (
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between mb-4">
+          <div>
+            {title && (
+              <TitleTag className="text-lg sm:text-xl font-semibold text-(--theme-text-primary)">
+                {title}
+              </TitleTag>
+            )}
+            {subtitle && (
+              <p className="text-sm text-(--theme-text-secondary)">
+                {subtitle}
+              </p>
+            )}
+          </div>
+          {actions && <div className="shrink-0">{actions}</div>}
+        </div>
+      )}
+
+      {isUpdating && <UpdatingOverlay label={updatingLabel} />}
+
+      {empty ? (emptyState ?? <DefaultEmptyState />) : children}
+    </div>
+  );
+}
+
+export default DashboardCard;

package/src/app/components/EditableCell.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from 'react';
+import type { EventFieldDefinition } from './EventForm';
+import type { PageEvent } from "@/templates/lytxpixel";
+
+const debug = true;
+
+interface EditableCellProps {
+  initialValue: any;
+  isEditing: boolean;
+  fieldDefinition: EventFieldDefinition;
+  eventId: string;
+  columnId: keyof PageEvent;
+  updateData: (eventId: string, columnId: keyof PageEvent, value: any) => void;
+  exitEditMode: () => void;
+}
+
+const EditableCellComponent: React.FC<EditableCellProps> = ({
+  initialValue,
+  isEditing,
+  fieldDefinition,
+  eventId,
+  columnId,
+  updateData,
+  exitEditMode,
+}) => {
+
+
+  // if (debug) {
+  //   console.log(`RENDER EditableCell: event='${eventId}' col='${String(columnId)}' isEditing=${isEditing} initialValue='${initialValue}'`);
+  // }
+
+  const [currentValue, setCurrentValue] = useState(initialValue);
+  const inputRef = useRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>(null);
+  const prevIsEditingRef = useRef<boolean>(false);
+
+  useEffect(() => {
+    const prevIsEditing = prevIsEditingRef.current;
+
+    // if (debug) {
+    //   console.log(`EFFECT EditableCell: event='${eventId}' col='${String(columnId)}'. Prev isEditing: ${prevIsEditing}, Current isEditing: ${isEditing}. InitialValue: '${initialValue}'`);
+    // }
+
+    if (isEditing) {
+      // Only set currentValue from initialValue if we are just entering edit mode
+      if (prevIsEditing === undefined || prevIsEditing === false) {
+        setCurrentValue(initialValue);
+      }
+      if (inputRef.current) {
+        inputRef.current.focus();
+        if (inputRef.current instanceof HTMLInputElement || inputRef.current instanceof HTMLTextAreaElement) {
+          inputRef.current.select();
+        }
+      }
+    }
+    prevIsEditingRef.current = isEditing; // Update for the next render
+  }, [isEditing]); // <<<< ENSURE THIS IS THE ONLY DEPENDENCY
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    setCurrentValue(e.target.value);
+    updateData(eventId, columnId, e.target.value);
+  };
+
+  const handleBlur = () => {
+    exitEditMode();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    if (e.key === 'Enter') {
+      if (fieldDefinition.type !== 'select' || (e.target as HTMLSelectElement).type !== 'select-one') {
+        e.preventDefault();
+        exitEditMode();
+      }
+    } else if (e.key === 'Escape') {
+      setCurrentValue(initialValue);
+      updateData(eventId, columnId, initialValue);
+      exitEditMode();
+    }
+  };
+
+  if (!isEditing) {
+    let displayValue: React.ReactNode = initialValue;
+    if (fieldDefinition.name === 'Notes' && typeof initialValue === 'string' && initialValue.length > 30) {
+      displayValue = `${initialValue.substring(0, 27)}...`;
+    } else if (typeof initialValue === 'boolean') {
+      displayValue = initialValue ? 'Yes' : 'No';
+    } else if (initialValue === null || initialValue === undefined || initialValue === '') {
+      displayValue = <span className="text-gray-400 italic">empty</span>;
+    }
+    return <>{displayValue}</>;
+  }
+
+  const commonProps = {
+    ref: inputRef as any,
+    value: currentValue ?? '',
+    onChange: handleChange,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    className: "w-full p-1 border border-blue-500 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 text-sm",
+  };
+
+  if (fieldDefinition.type === 'textarea') {
+    return <textarea {...commonProps} rows={2} />;
+  }
+
+  if (fieldDefinition.type === 'select') {
+    return (
+      <select {...commonProps}>
+        {fieldDefinition.options?.map(option => (
+          <option key={option} value={option}>
+            {String(option)}
+          </option>
+        ))}
+      </select>
+    );
+  }
+
+  return <input type="text" {...commonProps} />;
+};
+
+export const EditableCell = React.memo(EditableCellComponent);
+// export { EditableCellComponent as EditableCell };

package/src/app/components/EventForm.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+// import React from 'react';
+import type { PageEvent } from "@/templates/lytxpixel";
+
+export interface EventFieldDefinition {
+  name: keyof PageEvent;
+  label: string;
+  type: 'text' | 'textarea' | 'select';
+  options?: string[];
+}
+
+interface EventFormProps {
+  eventToEdit: PageEvent;
+  eventFields: EventFieldDefinition[];
+  onEventChange: (fieldName: keyof PageEvent, value: any) => void;
+  onCancel: () => void;
+  onSubmit: () => void;
+}
+
+export function EventForm({
+  eventToEdit,
+  eventFields,
+  onEventChange,
+  onCancel,
+  onSubmit,
+}: EventFormProps) {
+
+  if (!eventToEdit) {
+    return null;
+  }
+
+  return (
+    <div className="p-6 border rounded-lg bg-[var(--theme-card-bg)] border-[var(--theme-card-border)] shadow-md">
+      <h3 className="text-xl font-semibold mb-4 text-[var(--theme-text-primary)]">
+        Edit Event: {eventToEdit.event_name || 'New Event'}
+      </h3>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
+        {eventFields.map(field => (
+          <div key={field.name}>
+            <label htmlFor={`edit-${field.name}`} className="block text-sm font-medium text-[var(--theme-text-secondary)]">
+              {field.label}
+            </label>
+            {field.type === 'textarea' ? (
+              <textarea
+                id={`edit-${field.name}`}
+                value={(eventToEdit as any)[field.name] || ''}
+                onChange={(e) => onEventChange(field.name, e.target.value)}
+                rows={3}
+                className="mt-1 block w-full px-3 py-2 bg-[var(--theme-input-bg)] border border-[var(--theme-input-border)] rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[var(--theme-input-border-focus)] focus:border-[var(--theme-input-border-focus)] sm:text-sm text-[var(--theme-text-primary)]"
+              />
+            ) : field.type === 'select' ? (
+              <select
+                id={`edit-${field.name}`}
+                value={(eventToEdit as any)[field.name] || ''}
+                onChange={(e) => onEventChange(field.name, e.target.value)}
+                className="mt-1 block w-full px-3 py-2 bg-[var(--theme-input-bg)] border border-[var(--theme-input-border)] rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[var(--theme-input-border-focus)] focus:border-[var(--theme-input-border-focus)] sm:text-sm text-[var(--theme-text-primary)]"
+              >
+                {field.options?.map(option => (
+                  <option key={option} value={option}>{String(option)}</option>
+                ))}
+              </select>
+            ) : ( // type 'text'
+              <input
+                type={field.type}
+                id={`edit-${field.name}`}
+                value={(eventToEdit as any)[field.name] || ''}
+                onChange={(e) => onEventChange(field.name, e.target.value)}
+                className="mt-1 block w-full px-3 py-2 bg-[var(--theme-input-bg)] border border-[var(--theme-input-border)] rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[var(--theme-input-border-focus)] focus:border-[var(--theme-input-border-focus)] sm:text-sm text-[var(--theme-text-primary)]"
+              />
+            )}
+          </div>
+        ))}
+      </div>
+      <div className="mt-6 flex justify-end space-x-3">
+        <button
+          onClick={onCancel}
+          type="button"
+          className="px-4 py-2 bg-[var(--theme-bg-secondary)] text-[var(--theme-text-primary)] font-semibold rounded-md shadow-sm hover:bg-[var(--theme-bg-tertiary)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--theme-border-secondary)]"
+        >
+          Cancel
+        </button>
+        <button
+          onClick={onSubmit}
+          type="button"
+          className="px-4 py-2 bg-[var(--theme-button-bg)] text-white font-semibold rounded-md shadow-sm hover:bg-[var(--theme-button-hover)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--theme-border-secondary)]"
+        >
+          Apply Changes (to local)
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/app/components/MarketingFooter.tsx

@@ -0,0 +1,49 @@
+const Logo = () => (
+  <div className="flex items-center gap-2 font-montserrat font-bold text-2xl tracking-tight">
+    <img src="/logo.png" alt="Lytx logo" className="h-6 w-6" />
+    <span>Lytx</span>
+  </div>
+);
+
+export function MarketingFooter() {
+  return (
+    <footer className="bg-white border-t border-slate-200 py-16 dark:bg-black dark:border-slate-800">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
+          <div className="col-span-1 md:col-span-1">
+            <Logo />
+            <p className="mt-4 text-sm text-slate-500 dark:text-slate-400">
+              Privacy-friendly analytics for the modern web. Open source and transparent.
+            </p>
+          </div>
+          <div>
+            <h3 className="text-sm font-semibold text-slate-900 uppercase tracking-wider mb-4 dark:text-white">Product</h3>
+            <ul className="space-y-3">
+              <li><a href="/#features" className="text-slate-600 hover:text-amber-600 text-sm dark:text-slate-400 dark:hover:text-amber-400">Features</a></li>
+              <li><a href="/signup" className="text-slate-600 hover:text-amber-600 text-sm dark:text-slate-400 dark:hover:text-amber-400">Get Started</a></li>
+              <li><a href="/#demo" className="hidden text-slate-600 hover:text-amber-600 text-sm dark:text-slate-400 dark:hover:text-amber-400">Live Demo</a></li>
+            </ul>
+          </div>
+          <div>
+            <h3 className="text-sm font-semibold text-slate-900 uppercase tracking-wider mb-4 dark:text-white">Resources</h3>
+            <ul className="space-y-3">
+              <li><a href="/api/docs" className="text-slate-600 hover:text-amber-600 text-sm dark:text-slate-400 dark:hover:text-amber-400">API Documentation</a></li>
+              <li><a target="_blank" href="https://github.com/lytx-io/kit" className="text-slate-600 hover:text-amber-600 text-sm dark:text-slate-400 dark:hover:text-amber-400">GitHub</a></li>
+              <li><a href="#" className="hidden text-slate-600 hover:text-amber-600 text-sm dark:text-slate-400 dark:hover:text-amber-400">Blog</a></li>
+            </ul>
+          </div>
+          <div>
+            <h3 className="text-sm font-semibold text-slate-900 uppercase tracking-wider mb-4 dark:text-white">Legal</h3>
+            <ul className="space-y-3">
+              <li><a href="/privacy" className="text-slate-600 hover:text-amber-600 text-sm dark:text-slate-400 dark:hover:text-amber-400">Privacy Policy</a></li>
+              <li><a href="/terms" className="text-slate-600 hover:text-amber-600 text-sm dark:text-slate-400 dark:hover:text-amber-400">Terms of Service</a></li>
+            </ul>
+          </div>
+        </div>
+        <div className="mt-12 pt-8 border-t border-slate-100 dark:border-slate-800 text-center">
+          <p className="text-sm text-slate-400">© {new Date().getFullYear()} Lytx. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/src/app/components/MarketingNav.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeToggle } from "@/app/components/ui/ThemeToggle";
+
+const Logo = () => (
+  <div className="flex items-center gap-2 font-montserrat font-bold text-2xl tracking-tight">
+    <img src="/logo.png" alt="Lytx logo" className="h-6 w-6" />
+    <span>Lytx</span>
+  </div>
+);
+
+const GitHubIcon = () => (
+  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+  </svg>
+);
+
+const HamburgerIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <line x1="3" y1="6" x2="21" y2="6" />
+    <line x1="3" y1="12" x2="21" y2="12" />
+    <line x1="3" y1="18" x2="21" y2="18" />
+  </svg>
+);
+
+const CloseIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+);
+
+type NavLink = { label: string; href: string };
+
+export function MarketingNav({
+  links,
+  cta = { label: "Get Started", href: "/signup" },
+}: {
+  links?: NavLink[];
+  cta?: NavLink;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const navLinks = links ?? [
+    { label: "Features", href: "/#features" },
+    { label: "Get Started", href: "/signup" },
+    { label: "FAQ", href: "/#faq" },
+  ];
+
+  return (
+    <nav className="fixed w-full z-50 bg-slate-50/80 backdrop-blur-md border-b border-slate-200 dark:bg-black/80 dark:border-slate-800 transition-colors duration-300">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          <div className="flex items-center gap-8">
+            <a href="/" className="flex-shrink-0 hover:opacity-80 transition-opacity">
+              <Logo />
+            </a>
+            <div className="hidden md:flex items-center space-x-6">
+              {navLinks.map((link) => (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  className="text-sm font-medium text-slate-600 hover:text-amber-600 dark:text-slate-400 dark:hover:text-amber-400 transition-colors"
+                >
+                  {link.label}
+                </a>
+              ))}
+            </div>
+          </div>
+          <div className="flex items-center space-x-4">
+            <a
+              href="https://github.com/lytx-io/kit"
+              target="_blank"
+              rel="noreferrer"
+              className="hidden sm:inline-flex items-center gap-2 text-sm font-medium text-slate-600 hover:text-amber-600 dark:text-slate-400 dark:hover:text-amber-400 transition-colors"
+            >
+              <GitHubIcon />
+              GitHub
+            </a>
+            <ThemeToggle />
+            <a
+              href="/login"
+              className="hidden sm:inline-flex text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white transition-colors"
+            >
+              Log in
+            </a>
+            <a
+              href={cta.href}
+              className="hidden sm:inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-full text-white bg-slate-900 hover:bg-slate-800 dark:bg-white dark:text-black dark:hover:bg-slate-200 transition-all shadow-sm"
+            >
+              {cta.label}
+            </a>
+
+            {/* Mobile hamburger */}
+            <button
+              onClick={() => setIsOpen(!isOpen)}
+              className="md:hidden p-2 text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white transition-colors"
+              aria-label="Toggle menu"
+              aria-expanded={isOpen}
+            >
+              {isOpen ? <CloseIcon /> : <HamburgerIcon />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile menu */}
+      {isOpen && (
+        <div className="md:hidden bg-slate-50 dark:bg-black border-t border-slate-200 dark:border-slate-800">
+          <div className="px-4 py-4 space-y-3">
+            {navLinks.map((link) => (
+              <a
+                key={link.href}
+                href={link.href}
+                onClick={() => setIsOpen(false)}
+                className="block text-base font-medium text-slate-600 hover:text-amber-600 dark:text-slate-400 dark:hover:text-amber-400 transition-colors py-2"
+              >
+                {link.label}
+              </a>
+            ))}
+            <div className="pt-3 border-t border-slate-200 dark:border-slate-800 space-y-3">
+            <a
+              href="https://github.com/lytx-io/kit"
+                target="_blank"
+                rel="noreferrer"
+                className="flex items-center gap-2 text-base font-medium text-slate-600 hover:text-amber-600 dark:text-slate-400 dark:hover:text-amber-400 transition-colors py-2"
+              >
+                <GitHubIcon />
+                GitHub
+              </a>
+              <a
+                href="/login"
+                className="block text-base font-medium text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white transition-colors py-2"
+              >
+                Log in
+              </a>
+              <a
+                href={cta.href}
+                className="block text-center w-full px-4 py-3 text-base font-medium rounded-full text-white bg-slate-900 hover:bg-slate-800 dark:bg-white dark:text-black dark:hover:bg-slate-200 transition-all shadow-sm"
+              >
+                {cta.label}
+              </a>
+            </div>
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}