@pcoi/components 0.1.1 → 1.0.0

package/src/ChatInterface/ChatInterface.integration.test.tsx

@@ -1,123 +0,0 @@
-import React, { useState } from "react";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import type { Citation } from "../types";
-import { DocumentOverlay } from "../DocumentOverlay/DocumentOverlay";
-import { ChatInterface, type ChatInterfaceMessage } from "./ChatInterface";
-
-const citation: Citation = {
-  index: 1,
-  excerpt: "Structured capture improves onboarding outcomes.",
-  sourceTitle: "Knowledge Report",
-  sourceId: "doc-1",
-};
-
-const messages: ChatInterfaceMessage[] = [
-  {
-    id: "m-1",
-    role: "assistant",
-    content: "Structured capture improves onboarding outcomes.",
-    citations: [citation],
-    timestamp: "2:35 PM",
-  },
-];
-
-function ChatCitationHarness() {
-  const [overlayOpen, setOverlayOpen] = useState(false);
-  const [activeCitation, setActiveCitation] = useState<Citation | null>(null);
-
-  const handleCitationClick = (clickedCitation: Citation) => {
-    setActiveCitation(clickedCitation);
-    setOverlayOpen(true);
-  };
-
-  const doc = activeCitation
-    ? {
-        title: "Knowledge Retention Report",
-        sourceLabel: "Internal Research",
-        highlightId: "cite-1",
-        content: (
-          <>
-            <p id="cite-1">Structured capture improves onboarding outcomes.</p>
-            <p>Additional context.</p>
-          </>
-        ),
-      }
-    : null;
-
-  return (
-    <>
-      <ChatInterface
-        messages={messages}
-        promptValue=""
-        onPromptChange={() => {}}
-        onPromptSubmit={() => {}}
-        onCitationClick={handleCitationClick}
-      />
-      {doc && (
-        <DocumentOverlay
-          open={overlayOpen}
-          onClose={() => {
-            setOverlayOpen(false);
-            setActiveCitation(null);
-          }}
-          title={doc.title}
-          sourceLabel={doc.sourceLabel}
-          highlightId={doc.highlightId}
-          highlightIndex={activeCitation?.index}
-        >
-          {doc.content}
-        </DocumentOverlay>
-      )}
-    </>
-  );
-}
-
-describe("ChatInterface integration", () => {
-  it("opens document overlay with highlighted citation content", async () => {
-    if (!(globalThis.CSS && typeof globalThis.CSS.escape === "function")) {
-      const existing = globalThis.CSS ?? ({} as CSS);
-      globalThis.CSS = {
-        ...existing,
-        escape: (value: string) => value,
-      } as CSS;
-    }
-
-    const raf = vi
-      .spyOn(window, "requestAnimationFrame")
-      .mockImplementation((cb: FrameRequestCallback) => {
-        cb(0);
-        return 1;
-      });
-
-    const scrollIntoView = vi.fn();
-    Object.defineProperty(window.HTMLElement.prototype, "scrollIntoView", {
-      configurable: true,
-      value: scrollIntoView,
-    });
-
-    render(<ChatCitationHarness />);
-
-    fireEvent.click(screen.getByRole("button", { name: "Knowledge Report" }));
-
-    expect(screen.getByRole("dialog")).toBeInTheDocument();
-    expect(screen.getByText("Knowledge Retention Report")).toBeInTheDocument();
-    expect(screen.getByText("Internal Research")).toBeInTheDocument();
-
-    const highlighted = document.querySelector("#cite-1");
-    if (!highlighted) {
-      throw new Error("Expected highlighted citation element to exist");
-    }
-
-    await waitFor(() => {
-      expect(highlighted).toHaveClass("pcoi-doc-overlay__highlight");
-      expect(highlighted).toHaveAttribute("data-highlight-index", "[1]");
-      expect(scrollIntoView).toHaveBeenCalled();
-    });
-
-    fireEvent.click(screen.getByRole("button", { name: "Close modal" }));
-    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-
-    raf.mockRestore();
-  });
-});

package/src/ChatInterface/ChatInterface.tsx

@@ -1,120 +0,0 @@
-import React from "react";
-import { ChatMessageList } from "../ChatMessageList/ChatMessageList";
-import { ChatMessage } from "../ChatMessage/ChatMessage";
-import { SuggestionCards } from "../SuggestionCards/SuggestionCards";
-import { PromptBar } from "../PromptBar/PromptBar";
-import { TypingIndicator } from "../TypingIndicator/TypingIndicator";
-import type { ChatMessageRole, Citation, Suggestion } from "../types";
-
-export interface ChatInterfaceMessage {
-  id: string;
-  role: ChatMessageRole;
-  content: React.ReactNode;
-  citations?: Citation[];
-  timestamp?: string;
-}
-
-export interface ChatInterfaceProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  /** Conversation messages */
-  messages: ChatInterfaceMessage[];
-  /** Suggestion prompts for the empty state */
-  suggestions?: Suggestion[];
-  /** Current prompt textarea value */
-  promptValue: string;
-  /** Called when the prompt textarea changes */
-  onPromptChange: (value: string) => void;
-  /** Called when the user submits a prompt */
-  onPromptSubmit: (value: string) => void;
-  /** Called when a suggestion card is clicked */
-  onSuggestionSelect?: (suggestion: Suggestion) => void;
-  /** Called when a citation is clicked */
-  onCitationClick?: (citation: Citation) => void;
-  /** Textarea placeholder */
-  placeholder?: string;
-  /** Disable input while loading */
-  loading?: boolean;
-}
-
-/**
- * PCOI ChatInterface — Top-level chat composition
- * Empty state: suggestions + prompt. Active state: messages + prompt.
- * Tokens: bg/default, container/narrow, spacing-16/24
- */
-export const ChatInterface = React.forwardRef<
-  HTMLDivElement,
-  ChatInterfaceProps
->(
-  (
-    {
-      messages,
-      suggestions,
-      promptValue,
-      onPromptChange,
-      onPromptSubmit,
-      onSuggestionSelect,
-      onCitationClick,
-      placeholder,
-      loading = false,
-      className = "",
-      ...rest
-    },
-    ref
-  ) => {
-    const isEmpty = messages.length === 0;
-
-    const classes = [
-      "pcoi-chat",
-      isEmpty ? "pcoi-chat--empty" : "",
-      className,
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    return (
-      <div ref={ref} className={classes} {...rest}>
-        {isEmpty ? (
-          <div className="pcoi-chat__empty-state">
-            {suggestions && suggestions.length > 0 && onSuggestionSelect && (
-              <div className="pcoi-chat__suggestions">
-                <SuggestionCards
-                  suggestions={suggestions}
-                  onSelect={onSuggestionSelect}
-                />
-              </div>
-            )}
-          </div>
-        ) : (
-          <ChatMessageList className="pcoi-chat__messages">
-            {messages.map((msg) => (
-              <ChatMessage
-                key={msg.id}
-                role={msg.role}
-                citations={msg.citations}
-                timestamp={msg.timestamp}
-                onCitationClick={onCitationClick}
-              >
-                {msg.content}
-              </ChatMessage>
-            ))}
-            {loading && <TypingIndicator />}
-          </ChatMessageList>
-        )}
-
-        <div className="pcoi-chat__prompt">
-          <PromptBar
-            value={promptValue}
-            onChange={onPromptChange}
-            onSubmit={onPromptSubmit}
-            placeholder={placeholder}
-            loading={loading}
-            disabled={loading}
-          />
-        </div>
-      </div>
-    );
-  }
-);
-
-ChatInterface.displayName = "ChatInterface";
-export default ChatInterface;

package/src/ChatInterface/index.ts

@@ -1,6 +0,0 @@
-export {
-  ChatInterface,
-  type ChatInterfaceProps,
-  type ChatInterfaceMessage,
-} from "./ChatInterface";
-export { default } from "./ChatInterface";

package/src/ChatMessage/ChatMessage.css

@@ -1,55 +0,0 @@
-/* ChatMessage — @pcoi/components */
-
-.pcoi-chat-message {
-  display: flex;
-  flex-direction: column;
-  gap: var(--pcoi-semantic-spacing-inline-sm);
-  padding: var(--pcoi-semantic-spacing-stack-md);
-  border-radius: var(--pcoi-semantic-radius-card);
-  border: 1px solid var(--pcoi-semantic-border-card);
-}
-
-/* ── Role variants ── */
-.pcoi-chat-message--user {
-  background: var(--pcoi-semantic-bg-surface);
-}
-
-.pcoi-chat-message--assistant {
-  background: var(--pcoi-semantic-surface-accent-dim);
-}
-
-.pcoi-chat-message__header {
-  display: flex;
-  align-items: center;
-}
-
-.pcoi-chat-message__body {
-  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-chat-message__citations {
-  display: flex;
-  flex-direction: column;
-  gap: var(--pcoi-semantic-spacing-inline-sm);
-  margin-top: var(--pcoi-semantic-spacing-inline-2xs);
-}
-
-.pcoi-chat-message__timestamp {
-  font-family: var(--pcoi-semantic-type-body-font);
-  font-size: var(--pcoi-semantic-type-body-sm-size);
-  color: var(--pcoi-semantic-text-muted);
-}
-
-/* ── Responsive: offset margins on desktop ── */
-@media (min-width: 1025px) {
-  .pcoi-chat-message--user {
-    margin-left: var(--pcoi-semantic-spacing-inline-xl);
-  }
-
-  .pcoi-chat-message--assistant {
-    margin-right: var(--pcoi-semantic-spacing-inline-xl);
-  }
-}

package/src/ChatMessage/ChatMessage.tsx

@@ -1,71 +0,0 @@
-import React from "react";
-import { Badge } from "../Badge/Badge";
-import { CitedExcerpt } from "../CitedExcerpt/CitedExcerpt";
-import type { ChatMessageRole, Citation } from "../types";
-
-export interface ChatMessageProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  /** Message sender role */
-  role: ChatMessageRole;
-  /** Message body content */
-  children: React.ReactNode;
-  /** Citations referenced in the message */
-  citations?: Citation[];
-  /** Displayed below the message body */
-  timestamp?: string;
-  /** Called when a citation marker or source link is clicked */
-  onCitationClick?: (citation: Citation) => void;
-}
-
-/**
- * PCOI ChatMessage — User or assistant message bubble
- * Tokens: surface/elevated (user), bg/card (assistant), border/card,
- *         radius-md, text/primary, text/muted, type/body-size
- */
-export const ChatMessage = React.forwardRef<HTMLDivElement, ChatMessageProps>(
-  (
-    { role, children, citations, timestamp, onCitationClick, className = "", ...rest },
-    ref
-  ) => {
-    const classes = [
-      "pcoi-chat-message",
-      `pcoi-chat-message--${role}`,
-      className,
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    return (
-      <div ref={ref} className={classes} {...rest}>
-        <div className="pcoi-chat-message__header">
-          <Badge variant={role === "assistant" ? "default" : "info"}>
-            {role === "assistant" ? "PCOI" : "You"}
-          </Badge>
-        </div>
-
-        <div className="pcoi-chat-message__body">{children}</div>
-
-        {citations && citations.length > 0 && (
-          <div className="pcoi-chat-message__citations">
-            {citations.map((c) => (
-              <CitedExcerpt
-                key={c.index}
-                index={c.index}
-                excerpt={c.excerpt}
-                sourceTitle={c.sourceTitle}
-                onSourceClick={() => onCitationClick?.(c)}
-              />
-            ))}
-          </div>
-        )}
-
-        {timestamp && (
-          <time className="pcoi-chat-message__timestamp">{timestamp}</time>
-        )}
-      </div>
-    );
-  }
-);
-
-ChatMessage.displayName = "ChatMessage";
-export default ChatMessage;

package/src/ChatMessage/index.ts

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

package/src/ChatMessageList/ChatMessageList.css

@@ -1,24 +0,0 @@
-/* ChatMessageList — @pcoi/components */
-
-.pcoi-chat-message-list {
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.pcoi-chat-message-list__inner {
-  height: 100%;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--pcoi-semantic-spacing-stack-md);
-  padding: var(--pcoi-semantic-spacing-panel-padding-sm);
-}
-
-/* ── Responsive: wider spacing on tablet+ ── */
-@media (min-width: 768px) {
-  .pcoi-chat-message-list__inner {
-    gap: var(--pcoi-semantic-spacing-card-gap);
-    padding: var(--pcoi-semantic-spacing-panel-padding);
-  }
-}

package/src/ChatMessageList/ChatMessageList.test.tsx

@@ -1,74 +0,0 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { ChatMessage } from "../ChatMessage";
-import type { Citation } from "../types";
-import { ChatMessageList } from "./ChatMessageList";
-
-describe("ChatMessageList", () => {
-  it("renders children and relays citation clicks", () => {
-    const citation: Citation = {
-      index: 1,
-      excerpt: "Referenced excerpt.",
-      sourceTitle: "Knowledge Report",
-      sourceId: "doc-1",
-    };
-
-    const onCitationClick = vi.fn();
-
-    render(
-      <ChatMessageList>
-        <ChatMessage
-          role="assistant"
-          timestamp="2:35 PM"
-          citations={[citation]}
-          onCitationClick={onCitationClick}
-        >
-          Assistant response
-        </ChatMessage>
-      </ChatMessageList>
-    );
-
-    expect(screen.getByText("Assistant response")).toBeInTheDocument();
-
-    fireEvent.click(screen.getByRole("button", { name: "Knowledge Report" }));
-    fireEvent.click(screen.getByRole("button", { name: "[1]" }));
-
-    expect(onCitationClick).toHaveBeenCalledTimes(2);
-    expect(onCitationClick).toHaveBeenCalledWith(citation);
-  });
-
-  it("auto-scrolls to bottom when new messages are added", async () => {
-    vi.spyOn(window, "requestAnimationFrame").mockImplementation(
-      (cb: FrameRequestCallback) => {
-        cb(0);
-        return 1;
-      }
-    );
-
-    const { container, rerender } = render(
-      <ChatMessageList>
-        <div>Message 1</div>
-      </ChatMessageList>
-    );
-
-    const inner = container.querySelector(
-      ".pcoi-chat-message-list__inner"
-    ) as HTMLDivElement;
-
-    Object.defineProperty(inner, "scrollHeight", {
-      configurable: true,
-      get: () => 480,
-    });
-
-    rerender(
-      <ChatMessageList>
-        <div>Message 1</div>
-        <div>Message 2</div>
-      </ChatMessageList>
-    );
-
-    await waitFor(() => {
-      expect(inner.scrollTop).toBe(480);
-    });
-  });
-});

package/src/ChatMessageList/ChatMessageList.tsx

@@ -1,51 +0,0 @@
-import React, { useRef, useEffect } from "react";
-
-export interface ChatMessageListProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  /** ChatMessage elements */
-  children: React.ReactNode;
-}
-
-/**
- * PCOI ChatMessageList — Scrollable container that auto-scrolls to newest message
- * Tokens: spacing-16/20 (gap), spacing-16/24 (padding)
- */
-export const ChatMessageList = React.forwardRef<
-  HTMLDivElement,
-  ChatMessageListProps
->(({ children, className = "", ...rest }, ref) => {
-  const innerRef = useRef<HTMLDivElement>(null);
-
-  /* Scroll to bottom whenever the DOM inside the list changes */
-  useEffect(() => {
-    const el = innerRef.current;
-    if (!el) return;
-
-    const scrollToEnd = () => {
-      requestAnimationFrame(() => {
-        el.scrollTop = el.scrollHeight;
-      });
-    };
-
-    const observer = new MutationObserver(scrollToEnd);
-    observer.observe(el, { childList: true, subtree: true });
-
-    scrollToEnd();
-    return () => observer.disconnect();
-  }, []);
-
-  const classes = ["pcoi-chat-message-list", className]
-    .filter(Boolean)
-    .join(" ");
-
-  return (
-    <div ref={ref} className={classes} {...rest}>
-      <div ref={innerRef} className="pcoi-chat-message-list__inner">
-        {children}
-      </div>
-    </div>
-  );
-});
-
-ChatMessageList.displayName = "ChatMessageList";
-export default ChatMessageList;

package/src/ChatMessageList/index.ts

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

package/src/Checkbox/Checkbox.css

@@ -1,97 +0,0 @@
-/* Checkbox — @pcoi/components */
-
-.pcoi-checkbox {
-  display: flex;
-  flex-direction: column;
-  gap: var(--pcoi-semantic-spacing-form-gap-compact);
-}
-
-.pcoi-checkbox__control {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--pcoi-semantic-spacing-inline-sm);
-  cursor: pointer;
-}
-
-.pcoi-checkbox__input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.pcoi-checkbox__box {
-  width: var(--pcoi-semantic-sizing-control-box-size);
-  height: var(--pcoi-semantic-sizing-control-box-size);
-  flex-shrink: 0;
-  border: 1px solid var(--pcoi-semantic-border-default);
-  border-radius: var(--pcoi-semantic-radius-input);
-  background: var(--pcoi-semantic-bg-default);
-  transition: background var(--pcoi-effect-transition-fast, 0.2s ease),
-              border-color var(--pcoi-effect-transition-fast, 0.2s ease);
-  position: relative;
-}
-
-.pcoi-checkbox__box::after {
-  content: "";
-  position: absolute;
-  top: 2px;
-  left: 5px;
-  width: 5px;
-  height: 9px;
-  border: solid var(--pcoi-semantic-action-primary-text);
-  border-width: 0 2px 2px 0;
-  transform: rotate(45deg);
-  opacity: 0;
-  transition: opacity var(--pcoi-effect-transition-fast, 0.2s ease);
-}
-
-.pcoi-checkbox__input:checked + .pcoi-checkbox__box {
-  background: var(--pcoi-semantic-action-primary-bg);
-  border-color: var(--pcoi-semantic-action-primary-bg);
-}
-
-.pcoi-checkbox__input:checked + .pcoi-checkbox__box::after {
-  opacity: 1;
-}
-
-.pcoi-checkbox__control:hover .pcoi-checkbox__box {
-  border-color: var(--pcoi-semantic-border-input-hover);
-}
-
-.pcoi-checkbox__control:active .pcoi-checkbox__box {
-  transform: var(--pcoi-effect-transform-press-scale-control);
-}
-
-.pcoi-checkbox__input:focus-visible + .pcoi-checkbox__box {
-  border-color: var(--pcoi-semantic-focus-border);
-  box-shadow: var(--pcoi-effect-shadow-focus-ring);
-}
-
-.pcoi-checkbox__label {
-  font-size: var(--pcoi-semantic-type-body-size);
-  color: var(--pcoi-semantic-text-primary);
-}
-
-/* ── Error state ── */
-.pcoi-checkbox--error .pcoi-checkbox__box {
-  border-color: var(--pcoi-semantic-border-error);
-}
-
-.pcoi-checkbox__error {
-  font-size: var(--pcoi-semantic-type-label-size);
-  color: var(--pcoi-semantic-text-error);
-  margin: 0;
-  padding-left: calc(var(--pcoi-semantic-sizing-control-box-size) + var(--pcoi-semantic-spacing-inline-sm));
-}
-
-/* ── Disabled state ── */
-.pcoi-checkbox--disabled {
-  opacity: var(--pcoi-effect-opacity-disabled);
-  pointer-events: none;
-}