@pcoi/components 0.1.0

package/src/CitedExcerpt/CitedExcerpt.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+export interface CitedExcerptProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** 1-based citation index */
+  index: number;
+  /** Short excerpt from the source document */
+  excerpt: string;
+  /** Source document title */
+  sourceTitle: string;
+  /** Called when the source link is clicked */
+  onSourceClick?: () => void;
+}
+
+/**
+ * PCOI CitedExcerpt — Blockquote with excerpt text above, clickable index + source below
+ * Tokens: surface/accent-dim, border/accent-dim, accent-border-w,
+ *         radius-sm, text/secondary, text/accent, type/body-compact-size
+ */
+export const CitedExcerpt = React.forwardRef<HTMLDivElement, CitedExcerptProps>(
+  ({ index, excerpt, sourceTitle, onSourceClick, className = "", ...rest }, ref) => {
+    const classes = ["pcoi-cited-excerpt", className]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div ref={ref} className={classes} {...rest}>
+        <button
+          type="button"
+          className="pcoi-cited-excerpt__source"
+          onClick={onSourceClick}
+        >
+          {sourceTitle}
+        </button>
+        <div className="pcoi-cited-excerpt__body">
+          <button
+            type="button"
+            className="pcoi-cited-excerpt__index"
+            onClick={onSourceClick}
+          >
+            [{index}]
+          </button>
+          <p className="pcoi-cited-excerpt__text">{excerpt}</p>
+        </div>
+      </div>
+    );
+  }
+);
+
+CitedExcerpt.displayName = "CitedExcerpt";
+export default CitedExcerpt;

package/src/CitedExcerpt/index.ts

@@ -0,0 +1,2 @@
+export { CitedExcerpt, type CitedExcerptProps } from "./CitedExcerpt";
+export { default } from "./CitedExcerpt";

package/src/ComparisonTable/ComparisonTable.css

@@ -0,0 +1,66 @@
+/* ComparisonTable — @pcoi/components */
+
+.pcoi-comparison {
+  max-width: var(--pcoi-layout-container-compare, 900px);
+  border: 1px solid var(--pcoi-semantic-border-card);
+  border-radius: var(--pcoi-radius-md);
+  overflow: hidden;
+}
+
+.pcoi-comparison__table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.pcoi-comparison__header .pcoi-comparison__col {
+  font-family: var(--pcoi-semantic-type-mono-font);
+  font-size: var(--pcoi-semantic-type-body-sm-size);
+  font-weight: var(--pcoi-semantic-type-emphasis-weight);
+  letter-spacing: var(--pcoi-semantic-type-label-letter-spacing);
+  text-transform: uppercase;
+  color: var(--pcoi-semantic-text-secondary);
+  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-20);
+  background: var(--pcoi-semantic-bg-alt);
+  text-align: left;
+}
+
+.pcoi-comparison__row {
+  border-top: 1px solid var(--pcoi-semantic-border-card);
+}
+
+.pcoi-comparison__col {
+  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-20);
+  font-size: var(--pcoi-semantic-type-body-compact-size);
+  color: var(--pcoi-semantic-text-secondary);
+  line-height: var(--pcoi-semantic-type-body-compact-line-height);
+}
+
+.pcoi-comparison__col--label {
+  font-weight: var(--pcoi-semantic-type-label-weight);
+  color: var(--pcoi-semantic-text-primary);
+  text-align: left;
+}
+
+.pcoi-comparison__col--highlight {
+  background: var(--pcoi-semantic-surface-highlight);
+  color: var(--pcoi-semantic-text-accent);
+  font-weight: var(--pcoi-semantic-type-label-weight);
+}
+
+.pcoi-comparison__header .pcoi-comparison__col--highlight {
+  color: var(--pcoi-semantic-text-accent);
+  font-weight: var(--pcoi-semantic-type-emphasis-weight);
+}
+
+/* ── Responsive ── */
+/* 768px = --pcoi-layout-breakpoint-mobile (CSS vars not supported in @media) */
+@media (max-width: 768px) {
+  .pcoi-comparison {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .pcoi-comparison__table {
+    min-width: var(--pcoi-layout-container-compare-scroll);
+  }
+}

package/src/ComparisonTable/ComparisonTable.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+export interface ComparisonRow {
+  label: string;
+  competitor: string;
+  pcoi: string;
+}
+
+export interface ComparisonTableProps extends React.HTMLAttributes<HTMLDivElement> {
+  competitorName?: string;
+  pcoiName?: string;
+  rows: ComparisonRow[];
+}
+
+/**
+ * PCOI Comparison Table
+ * Semantic <table> with 3 columns: label | competitor | PCOI (highlighted)
+ * Tokens: radius-md, border/default, bg/alt, surface/accent-dim, text/accent
+ */
+export const ComparisonTable = React.forwardRef<HTMLDivElement, ComparisonTableProps>(
+  ({ competitorName = "Typical SaaS AI", pcoiName = "PCOI", rows, className = "", ...rest }, ref) => (
+    <div ref={ref} className={`pcoi-comparison ${className}`} {...rest}>
+      <table className="pcoi-comparison__table">
+        <thead>
+          <tr className="pcoi-comparison__header">
+            <th className="pcoi-comparison__col" scope="col">
+              <span className="pcoi-sr-only">Feature</span>
+            </th>
+            <th className="pcoi-comparison__col" scope="col">{competitorName}</th>
+            <th className="pcoi-comparison__col pcoi-comparison__col--highlight" scope="col">{pcoiName}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, i) => (
+            <tr key={i} className="pcoi-comparison__row">
+              <th className="pcoi-comparison__col pcoi-comparison__col--label" scope="row">{row.label}</th>
+              <td className="pcoi-comparison__col">{row.competitor}</td>
+              <td className="pcoi-comparison__col pcoi-comparison__col--highlight">{row.pcoi}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+);
+
+ComparisonTable.displayName = "ComparisonTable";
+export default ComparisonTable;

package/src/ComparisonTable/index.ts

@@ -0,0 +1 @@
+export { ComparisonTable, type ComparisonTableProps, type ComparisonRow } from "./ComparisonTable";

package/src/ContactForm/ContactForm.css

@@ -0,0 +1,38 @@
+/* ContactForm — @pcoi/components */
+
+.pcoi-form {
+  background: var(--pcoi-semantic-bg-surface);
+  border: 1px solid var(--pcoi-semantic-border-default);
+  border-radius: var(--pcoi-radius-lg);
+  padding: var(--pcoi-spacing-40);
+  display: flex;
+  flex-direction: column;
+  gap: var(--pcoi-spacing-20);
+}
+
+.pcoi-form__row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--pcoi-spacing-20);
+}
+
+.pcoi-form__full {
+  grid-column: 1 / -1;
+}
+
+.pcoi-form__note {
+  font-size: var(--pcoi-semantic-type-label-size);
+  color: var(--pcoi-semantic-text-muted);
+  margin: 0;
+}
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+  .pcoi-form {
+    padding: var(--pcoi-spacing-24);
+  }
+
+  .pcoi-form__row {
+    grid-template-columns: 1fr;
+  }
+}

package/src/ContactForm/ContactForm.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import { Button } from "../Button";
+import { FormField } from "../FormField";
+
+export interface ContactFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+  onSubmit?: (data: Record<string, string>) => void;
+}
+
+/**
+ * PCOI Contact Form
+ * Composes: FormField (atom), Button (atom)
+ * Tokens: bg/surface, border/default, radius-lg, spacing-40 (padding), spacing-20 (gap)
+ */
+export const ContactForm = React.forwardRef<HTMLFormElement, ContactFormProps>(
+  ({ onSubmit, className = "", ...rest }, ref) => {
+    const [submitted, setSubmitted] = useState(false);
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      const form = e.currentTarget;
+      const formData = new FormData(form);
+      const data = Object.fromEntries(formData.entries()) as Record<string, string>;
+      onSubmit?.(data);
+      setSubmitted(true);
+      form.reset();
+      setTimeout(() => setSubmitted(false), 3000);
+    };
+
+    return (
+      <form ref={ref} className={`pcoi-form ${className}`} onSubmit={handleSubmit} aria-label="Contact form" {...rest}>
+        <div className="pcoi-form__row">
+          <FormField label="Name" name="name" placeholder="Your name" required />
+          <FormField label="Company" name="company" placeholder="Company name" required />
+        </div>
+        <div className="pcoi-form__row">
+          <FormField label="Email" name="email" type="email" placeholder="you@company.com" required />
+          <FormField label="Your Role" name="role" placeholder="CEO, COO, VP Ops, etc." />
+        </div>
+        <FormField
+          label="What problem are you trying to solve?"
+          name="context"
+          multiline
+          rows={3}
+          placeholder="Tell us about the knowledge challenges in your organization..."
+          className="pcoi-form__full"
+        />
+        <Button type="submit" variant="primary" size="large" disabled={submitted}>
+          {submitted ? "Message Received" : "Start the Conversation"}
+        </Button>
+        <p className="pcoi-form__note">No sales automation. A real person reads this and responds personally.</p>
+      </form>
+    );
+  }
+);
+
+ContactForm.displayName = "ContactForm";
+export default ContactForm;

package/src/ContactForm/index.ts

@@ -0,0 +1 @@
+export { ContactForm, type ContactFormProps } from "./ContactForm";

package/src/DataTable/DataTable.css

@@ -0,0 +1,56 @@
+/* DataTable — @pcoi/components */
+
+.pcoi-data-table {
+  width: 100%;
+  overflow: hidden;
+  overflow-x: auto;
+  border: 1px solid var(--pcoi-semantic-border-card);
+  border-radius: var(--pcoi-radius-md);
+}
+
+.pcoi-data-table__table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.pcoi-data-table__th {
+  font-family: var(--pcoi-semantic-type-mono-font);
+  font-size: var(--pcoi-semantic-type-body-sm-size);
+  font-weight: var(--pcoi-semantic-type-emphasis-weight);
+  letter-spacing: var(--pcoi-semantic-type-label-letter-spacing);
+  text-transform: uppercase;
+  color: var(--pcoi-semantic-text-secondary);
+  text-align: left;
+  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-20);
+  background: var(--pcoi-semantic-bg-alt);
+}
+
+.pcoi-data-table__th--center { text-align: center; }
+.pcoi-data-table__th--right  { text-align: right; }
+
+.pcoi-data-table__td {
+  font-size: var(--pcoi-semantic-type-body-compact-size);
+  color: var(--pcoi-semantic-text-secondary);
+  line-height: var(--pcoi-semantic-type-body-compact-line-height);
+  text-align: left;
+  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-20);
+}
+
+.pcoi-data-table__td--center { text-align: center; }
+.pcoi-data-table__td--right  { text-align: right; }
+
+.pcoi-data-table__row {
+  border-top: 1px solid var(--pcoi-semantic-border-card);
+  transition: background var(--pcoi-effect-transition-fast, 0.2s ease);
+}
+
+.pcoi-data-table__row:hover {
+  background: var(--pcoi-semantic-bg-card-hover);
+}
+
+.pcoi-data-table__empty {
+  font-size: var(--pcoi-semantic-type-body-size);
+  color: var(--pcoi-semantic-text-muted);
+  text-align: center;
+  padding: var(--pcoi-spacing-40) var(--pcoi-spacing-16);
+}

package/src/DataTable/DataTable.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+
+export interface DataTableColumn<T = Record<string, unknown>> {
+  /** Unique key matching a property on the row data */
+  key: string;
+  /** Column header text */
+  header: string;
+  /** Text alignment (default: "left") */
+  align?: "left" | "center" | "right";
+  /** Custom cell renderer */
+  render?: (value: unknown, row: T) => React.ReactNode;
+}
+
+export interface DataTableProps<T = Record<string, unknown>> extends React.HTMLAttributes<HTMLDivElement> {
+  /** Column definitions */
+  columns: DataTableColumn<T>[];
+  /** Row data */
+  rows: T[];
+  /** Key extractor for row identity */
+  rowKey?: keyof T | ((row: T, index: number) => string);
+  /** Empty state message */
+  emptyText?: string;
+  /** Accessible label for the table (describes its content for screen readers) */
+  ariaLabel?: string;
+}
+
+/**
+ * PCOI DataTable — Presentational data table for dashboards
+ * Tokens: bg/card-hover, border/default, text/primary, text/secondary,
+ *         font-size/caption/body-default, spacing-12/16
+ */
+export const DataTable = React.forwardRef<HTMLDivElement, DataTableProps>(
+  (
+    {
+      columns,
+      rows,
+      rowKey,
+      emptyText = "No data available",
+      ariaLabel,
+      className = "",
+      ...rest
+    },
+    ref
+  ) => {
+    const getRowKey = (row: Record<string, unknown>, index: number): string => {
+      if (!rowKey) return String(index);
+      if (typeof rowKey === "function") return rowKey(row, index);
+      return String(row[rowKey as string]);
+    };
+
+    return (
+      <div ref={ref} className={`pcoi-data-table ${className}`} {...rest}>
+        <table className="pcoi-data-table__table" aria-label={ariaLabel}>
+          <thead className="pcoi-data-table__head">
+            <tr className="pcoi-data-table__head-row">
+              {columns.map((col) => (
+                <th
+                  key={col.key}
+                  className={`pcoi-data-table__th${col.align ? ` pcoi-data-table__th--${col.align}` : ""}`}
+                >
+                  {col.header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="pcoi-data-table__body">
+            {rows.length === 0 ? (
+              <tr>
+                <td
+                  colSpan={columns.length}
+                  className="pcoi-data-table__empty"
+                >
+                  {emptyText}
+                </td>
+              </tr>
+            ) : (
+              rows.map((row, index) => (
+                <tr
+                  key={getRowKey(row as Record<string, unknown>, index)}
+                  className="pcoi-data-table__row"
+                >
+                  {columns.map((col) => {
+                    const value = (row as Record<string, unknown>)[col.key];
+                    return (
+                      <td
+                        key={col.key}
+                        className={`pcoi-data-table__td${col.align ? ` pcoi-data-table__td--${col.align}` : ""}`}
+                      >
+                        {col.render ? col.render(value, row) : String(value ?? "")}
+                      </td>
+                    );
+                  })}
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+);
+
+DataTable.displayName = "DataTable";
+export default DataTable;

package/src/DataTable/index.ts

@@ -0,0 +1,2 @@
+export { DataTable, type DataTableProps, type DataTableColumn } from "./DataTable";
+export { default } from "./DataTable";

package/src/DocumentOverlay/DocumentOverlay.css

@@ -0,0 +1,57 @@
+/* DocumentOverlay — @pcoi/components */
+
+/* ── Gold modal title ── */
+.pcoi-doc-overlay .pcoi-modal__title {
+  color: var(--pcoi-semantic-text-accent);
+}
+
+.pcoi-doc-overlay__content {
+  font-family: var(--pcoi-semantic-type-body-font);
+  font-size: var(--pcoi-semantic-type-body-size);
+  line-height: var(--pcoi-semantic-type-body-line-height);
+  color: var(--pcoi-semantic-text-primary);
+}
+
+.pcoi-doc-overlay__content p {
+  margin: 0 0 var(--pcoi-spacing-12);
+}
+
+.pcoi-doc-overlay__content p:last-child {
+  margin-bottom: 0;
+}
+
+.pcoi-doc-overlay__highlight {
+  display: flex;
+  align-items: baseline;
+  gap: var(--pcoi-spacing-6);
+  background: var(--pcoi-semantic-surface-highlight);
+  border-left: var(--pcoi-layout-component-accent-border-w) solid
+    var(--pcoi-semantic-border-accent-subtle);
+  padding: var(--pcoi-spacing-8) var(--pcoi-spacing-12);
+  border-radius: var(--pcoi-radius-sm);
+  animation: pcoi-doc-highlight-fade 0.4s ease;
+}
+
+.pcoi-doc-overlay__highlight[data-highlight-index]::before {
+  content: attr(data-highlight-index);
+  flex-shrink: 0;
+  font-family: var(--pcoi-semantic-type-mono-font);
+  font-size: var(--pcoi-semantic-type-body-compact-size);
+  font-weight: var(--pcoi-semantic-type-label-weight);
+  color: var(--pcoi-semantic-text-accent);
+}
+
+.pcoi-doc-overlay__source {
+  display: flex;
+  align-items: center;
+}
+
+/* ── Animation ── */
+@keyframes pcoi-doc-highlight-fade {
+  from {
+    background: var(--pcoi-semantic-surface-accent-dim);
+  }
+  to {
+    background: var(--pcoi-semantic-surface-highlight);
+  }
+}

package/src/DocumentOverlay/DocumentOverlay.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useRef } from "react";
+import { Modal } from "../Modal/Modal";
+import { Badge } from "../Badge/Badge";
+
+export interface DocumentOverlayProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Whether the overlay is visible */
+  open: boolean;
+  /** Called when the overlay should close */
+  onClose: () => void;
+  /** Document title shown in the header */
+  title: string;
+  /** Optional source label shown as a badge */
+  sourceLabel?: string;
+  /** Document body content */
+  children: React.ReactNode;
+  /** Element ID to scroll to and highlight on open */
+  highlightId?: string;
+  /** Citation index to display beside the highlighted element */
+  highlightIndex?: number;
+}
+
+/**
+ * PCOI DocumentOverlay — Wide modal for viewing source documents with highlighted citations
+ * Composes Modal (size="wide") + Badge
+ * Tokens: surface/highlight, border/accent-subtle, container/document
+ */
+export const DocumentOverlay = React.forwardRef<
+  HTMLDivElement,
+  DocumentOverlayProps
+>(
+  (
+    { open, onClose, title, sourceLabel, children, highlightId, highlightIndex, className = "", ...rest },
+    ref
+  ) => {
+    const contentRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      if (open && highlightId && contentRef.current) {
+        requestAnimationFrame(() => {
+          const el = contentRef.current?.querySelector(`#${CSS.escape(highlightId)}`);
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth", block: "center" });
+            el.classList.add("pcoi-doc-overlay__highlight");
+            if (highlightIndex !== undefined) {
+              el.setAttribute("data-highlight-index", `[${highlightIndex}]`);
+            }
+          }
+        });
+      }
+    }, [open, highlightId, highlightIndex]);
+
+    const classes = ["pcoi-doc-overlay", className]
+      .filter(Boolean)
+      .join(" ");
+
+    const footer = sourceLabel
+      ? React.createElement(
+          "div",
+          { className: "pcoi-doc-overlay__source" },
+          React.createElement(Badge, null, sourceLabel)
+        )
+      : undefined;
+
+    return React.createElement(
+      Modal,
+      {
+        open,
+        onClose,
+        title,
+        size: "wide",
+        footer,
+        className: classes,
+        ...rest,
+      },
+      React.createElement(
+        "div",
+        { ref: contentRef, className: "pcoi-doc-overlay__content" },
+        children
+      )
+    );
+  }
+);
+
+DocumentOverlay.displayName = "DocumentOverlay";
+export default DocumentOverlay;

package/src/DocumentOverlay/index.ts

@@ -0,0 +1,2 @@
+export { DocumentOverlay, type DocumentOverlayProps } from "./DocumentOverlay";
+export { default } from "./DocumentOverlay";

package/src/Footer/Footer.css

@@ -0,0 +1,72 @@
+/* Footer — @pcoi/components */
+
+.pcoi-footer {
+  border-top: 1px solid var(--pcoi-semantic-border-default);
+  padding: var(--pcoi-spacing-60) var(--pcoi-spacing-24) var(--pcoi-spacing-40);
+}
+
+.pcoi-footer__inner {
+  max-width: var(--pcoi-layout-container-max);
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+/* ── Brand (LogoMark overrides) ── */
+.pcoi-footer__logo {
+  margin-bottom: var(--pcoi-spacing-8);
+}
+
+.pcoi-footer__tagline {
+  font-size: var(--pcoi-semantic-type-body-sm-size);
+  color: var(--pcoi-semantic-text-secondary);
+  line-height: var(--pcoi-semantic-type-body-compact-line-height);
+  margin: 0;
+  white-space: pre-line;
+}
+
+/* ── Links ── */
+.pcoi-footer__links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--pcoi-spacing-28);
+}
+
+.pcoi-footer__links a {
+  font-size: var(--pcoi-semantic-type-nav-size);
+  color: var(--pcoi-semantic-text-secondary);
+  text-decoration: none;
+  transition: color var(--pcoi-effect-transition-fast, 0.2s ease);
+}
+
+.pcoi-footer__links a:hover {
+  color: var(--pcoi-semantic-text-primary);
+}
+
+/* ── Bottom ── */
+.pcoi-footer__bottom {
+  max-width: var(--pcoi-layout-container-max);
+  margin: var(--pcoi-spacing-40) auto 0;
+  padding-top: var(--pcoi-spacing-24);
+  border-top: 1px solid var(--pcoi-semantic-border-default);
+}
+
+.pcoi-footer__bottom p {
+  font-size: var(--pcoi-semantic-type-label-size);
+  color: var(--pcoi-semantic-text-muted);
+  margin: 0;
+}
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+  .pcoi-footer__inner {
+    flex-direction: column;
+    gap: var(--pcoi-spacing-32);
+  }
+
+  .pcoi-footer__links {
+    flex-direction: column;
+    gap: var(--pcoi-spacing-14);
+  }
+}