@pcoi/components 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pcoi/components",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "PCOI Design System — React UI components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -27,10 +27,17 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@pcoi/tokens": "^0.1.0",
-    "@pcoi/icons": "^0.1.0"
+    "@pcoi/tokens": "^0.1.1",
+    "@pcoi/icons": "^0.1.1"
   },
-  "keywords": ["components", "pcoi", "design-system", "react"],
+  "keywords": [
+    "components",
+    "pcoi",
+    "design-system",
+    "react"
+  ],
   "license": "MIT",
-  "sideEffects": ["*.css"]
+  "sideEffects": [
+    "*.css"
+  ]
 }

package/src/Badge/Badge.css

@@ -8,8 +8,8 @@
   font-weight: var(--pcoi-semantic-type-label-weight);
   letter-spacing: var(--pcoi-semantic-type-badge-letter-spacing);
   text-transform: uppercase;
-  padding: var(--pcoi-spacing-4) var(--pcoi-spacing-10);
-  border-radius: var(--pcoi-radius-full);
+  padding: var(--pcoi-semantic-spacing-inline-2xs) var(--pcoi-semantic-spacing-chip-x);
+  border-radius: var(--pcoi-semantic-radius-badge);
   line-height: var(--pcoi-semantic-type-none-line-height);
 }
 

package/src/Button/Button.css

@@ -5,11 +5,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--pcoi-spacing-14) var(--pcoi-spacing-28);
+  padding: var(--pcoi-semantic-spacing-btn-y-comfortable) var(--pcoi-semantic-spacing-btn-x-comfortable);
   font-size: var(--pcoi-semantic-type-body-size);  /* 0.95rem */
   font-weight: var(--pcoi-semantic-type-emphasis-weight);
   font-family: var(--pcoi-semantic-type-body-font);
-  border-radius: var(--pcoi-radius-sm);
+  border-radius: var(--pcoi-semantic-radius-btn);
   border: none;
   cursor: pointer;
   transition: all var(--pcoi-effect-transition-fast, 0.2s ease);
@@ -47,7 +47,7 @@
 .pcoi-btn--nav-cta {
   background: var(--pcoi-semantic-action-primary-bg);
   color: var(--pcoi-semantic-action-primary-text);
-  padding: var(--pcoi-spacing-10) var(--pcoi-spacing-22);
+  padding: var(--pcoi-semantic-spacing-btn-y) var(--pcoi-semantic-spacing-btn-x-nav);
   font-weight: var(--pcoi-semantic-type-emphasis-weight);
 }
 
@@ -88,6 +88,6 @@
 
 /* ── Size: Large ── */
 .pcoi-btn--large {
-  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-36);
+  padding: var(--pcoi-semantic-spacing-btn-y-lg) var(--pcoi-semantic-spacing-btn-x-lg);
   font-size: var(--pcoi-semantic-type-body-lg-size);  /* 1rem */
 }

package/src/Button/Button.figma.tsx

@@ -5,9 +5,7 @@ import { Button } from "./Button";
  * Code Connect: Button/Primary
  * Maps Figma Button component properties to React Button props
  */
-// TODO: Replace with your Figma component URL from the Figma file
-// e.g. "https://www.figma.com/file/FILEID/NAME?node-id=NODEID"
-figma.connect(Button, "https://figma.com/REPLACE_WITH_BUTTON_COMPONENT_URL", {
+figma.connect(Button, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=101-1", {
   props: {
     variant: figma.enum("Variant", {
       Primary: "primary",
@@ -21,8 +19,8 @@ figma.connect(Button, "https://figma.com/REPLACE_WITH_BUTTON_COMPONENT_URL", {
     label: figma.string("Label"),
     disabled: figma.boolean("Disabled"),
   },
-  example: ({ variant, size, label }) => (
-    <Button variant={variant} size={size}>
+  example: ({ variant, size, label, disabled }) => (
+    <Button variant={variant} size={size} disabled={disabled}>
       {label}
     </Button>
   ),

package/src/Button/Button.test.tsx

@@ -0,0 +1,32 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { Button } from "./Button";
+
+describe("Button", () => {
+  it("renders children with default variant classes", () => {
+    render(<Button>Send</Button>);
+
+    const button = screen.getByRole("button", { name: "Send" });
+    expect(button).toHaveClass("pcoi-btn", "pcoi-btn--primary");
+    expect(button).not.toHaveClass("pcoi-btn--large");
+  });
+
+  it("applies variant and size classes", () => {
+    render(
+      <Button variant="ghost" size="large">
+        Cancel
+      </Button>
+    );
+
+    const button = screen.getByRole("button", { name: "Cancel" });
+    expect(button).toHaveClass("pcoi-btn--ghost", "pcoi-btn--large");
+  });
+
+  it("invokes onClick when enabled", () => {
+    const onClick = vi.fn();
+    render(<Button onClick={onClick}>Click</Button>);
+
+    fireEvent.click(screen.getByRole("button", { name: "Click" }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});

package/src/Callout/Callout.css

@@ -2,17 +2,17 @@
 
 .pcoi-callout {
   text-align: center;
-  padding: var(--pcoi-spacing-40) var(--pcoi-spacing-24);
+  padding: var(--pcoi-semantic-spacing-component-gap) var(--pcoi-semantic-spacing-btn-x);
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
 .pcoi-callout__line {
-  width: var(--pcoi-layout-component-accent-line-w);
+  width: var(--pcoi-semantic-sizing-accent-line-width);
   height: 2px;
   background: var(--pcoi-semantic-text-accent);
-  margin-bottom: var(--pcoi-spacing-32);
+  margin-bottom: var(--pcoi-semantic-spacing-stack-lg);
 }
 
 .pcoi-callout__quote {
@@ -20,8 +20,8 @@
   font-weight: var(--pcoi-semantic-type-callout-weight);
   color: var(--pcoi-semantic-text-secondary);
   line-height: var(--pcoi-semantic-type-body-compact-line-height);
-  max-width: var(--pcoi-layout-container-chamath, 640px);
-  margin: 0 0 var(--pcoi-spacing-24) 0;
+  max-width: var(--pcoi-semantic-sizing-callout-width, 640px);
+  margin: 0 0 var(--pcoi-semantic-spacing-panel-padding) 0;
   font-style: italic;
 }
 

package/src/Callout/Callout.figma.tsx

@@ -0,0 +1,25 @@
+import figma from "@figma/code-connect";
+import { Callout } from "./Callout";
+
+/**
+ * Code Connect: Callout
+ * Maps Figma callout content properties to React Callout props
+ */
+figma.connect(Callout, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=108-1", {
+  props: {
+    quote: figma.string("Quote"),
+    attribution: figma.string("Attribution"),
+    attributionTitle: figma.string("Attribution Title"),
+    sourceUrl: figma.string("Source URL"),
+    sourceLabel: figma.string("Source Label"),
+  },
+  example: ({ quote, attribution, attributionTitle, sourceUrl, sourceLabel }) => (
+    <Callout
+      quote={quote}
+      attribution={attribution || undefined}
+      attributionTitle={attributionTitle || undefined}
+      sourceUrl={sourceUrl || undefined}
+      sourceLabel={sourceLabel || undefined}
+    />
+  ),
+});

package/src/Card/Card.css

@@ -2,8 +2,8 @@
 
 .pcoi-card {
   border: 1px solid var(--pcoi-semantic-border-card);
-  border-radius: var(--pcoi-radius-md);
-  padding: var(--pcoi-spacing-36);
+  border-radius: var(--pcoi-semantic-radius-card);
+  padding: var(--pcoi-semantic-spacing-card-padding);
   transition: border-color var(--pcoi-effect-transition-medium, 0.3s ease),
               transform var(--pcoi-effect-transition-medium, 0.3s ease);
 }
@@ -21,12 +21,12 @@
 .pcoi-card--problem .pcoi-card__icon {
   width: var(--pcoi-semantic-sizing-icon-box);
   height: var(--pcoi-semantic-sizing-icon-box);
-  border-radius: var(--pcoi-radius-sm);
+  border-radius: var(--pcoi-semantic-radius-btn);
   background: var(--pcoi-semantic-surface-accent-dim);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: var(--pcoi-spacing-20);
+  margin-bottom: var(--pcoi-semantic-spacing-card-gap);
   color: var(--pcoi-semantic-text-accent);
 }
 
@@ -34,7 +34,7 @@
   font-size: var(--pcoi-semantic-type-heading-md-size);
   font-weight: var(--pcoi-semantic-type-emphasis-weight);
   color: var(--pcoi-semantic-text-primary);
-  margin: 0 0 var(--pcoi-spacing-10) 0;
+  margin: 0 0 var(--pcoi-semantic-spacing-text-gap-sm) 0;
 }
 
 .pcoi-card--problem .pcoi-card__description {
@@ -52,7 +52,7 @@
   font-size: var(--pcoi-semantic-type-heading-sm-size);
   font-weight: var(--pcoi-semantic-type-emphasis-weight);
   color: var(--pcoi-semantic-text-accent);
-  margin: 0 0 var(--pcoi-spacing-10) 0;
+  margin: 0 0 var(--pcoi-semantic-spacing-text-gap-sm) 0;
 }
 
 .pcoi-card--who .pcoi-card__description {
@@ -71,14 +71,14 @@
   font-size: var(--pcoi-semantic-type-body-sm-size);
   font-weight: var(--pcoi-semantic-type-emphasis-weight);
   color: var(--pcoi-semantic-text-accent);
-  margin-bottom: var(--pcoi-spacing-16);
+  margin-bottom: var(--pcoi-semantic-spacing-stack-md);
 }
 
 .pcoi-card--principle .pcoi-card__title {
   font-size: var(--pcoi-semantic-type-card-subtitle-size);
   font-weight: var(--pcoi-semantic-type-emphasis-weight);
   color: var(--pcoi-semantic-text-primary);
-  margin: 0 0 var(--pcoi-spacing-10) 0;
+  margin: 0 0 var(--pcoi-semantic-spacing-text-gap-sm) 0;
 }
 
 .pcoi-card--principle .pcoi-card__description {

package/src/Card/Card.figma.tsx

@@ -0,0 +1,28 @@
+import figma from "@figma/code-connect";
+import { Card } from "./Card";
+
+/**
+ * Code Connect: Card
+ * Maps Figma Card component properties to React Card props
+ */
+figma.connect(Card, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=102-1", {
+  props: {
+    variant: figma.enum("Variant", {
+      Problem: "problem",
+      Who: "who",
+      Principle: "principle",
+    }),
+    title: figma.string("Title"),
+    description: figma.string("Description"),
+    number: figma.string("Number"),
+  },
+  example: ({ variant, title, description, number }) => (
+    <Card
+      variant={variant}
+      title={title}
+      description={description}
+      number={number}
+      icon={variant === "problem" ? <span aria-hidden="true">!</span> : undefined}
+    />
+  ),
+});

package/src/ChatInterface/ChatInterface.css

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  max-width: var(--pcoi-layout-container-narrow, 800px);
+  max-width: var(--pcoi-semantic-sizing-container-narrow, 800px);
   margin: 0 auto;
 }
 
@@ -18,7 +18,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: var(--pcoi-spacing-16);
+  padding: var(--pcoi-semantic-spacing-panel-padding-sm);
 }
 
 .pcoi-chat__suggestions {
@@ -34,16 +34,16 @@
 /* ── Prompt ── */
 .pcoi-chat__prompt {
   flex-shrink: 0;
-  padding: var(--pcoi-spacing-16);
+  padding: var(--pcoi-semantic-spacing-panel-padding-sm);
 }
 
 /* ── Responsive ── */
 @media (min-width: 768px) {
   .pcoi-chat__empty-state {
-    padding: var(--pcoi-spacing-24);
+    padding: var(--pcoi-semantic-spacing-panel-padding);
   }
 
   .pcoi-chat__prompt {
-    padding: var(--pcoi-spacing-24);
+    padding: var(--pcoi-semantic-spacing-panel-padding);
   }
 }

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

@@ -0,0 +1,123 @@
+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/ChatMessage/ChatMessage.css

@@ -3,15 +3,15 @@
 .pcoi-chat-message {
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-8);
-  padding: var(--pcoi-spacing-16);
-  border-radius: var(--pcoi-radius-md);
+  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-color-surface);
+  background: var(--pcoi-semantic-bg-surface);
 }
 
 .pcoi-chat-message--assistant {
@@ -33,8 +33,8 @@
 .pcoi-chat-message__citations {
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-8);
-  margin-top: var(--pcoi-spacing-4);
+  gap: var(--pcoi-semantic-spacing-inline-sm);
+  margin-top: var(--pcoi-semantic-spacing-inline-2xs);
 }
 
 .pcoi-chat-message__timestamp {
@@ -46,10 +46,10 @@
 /* ── Responsive: offset margins on desktop ── */
 @media (min-width: 1025px) {
   .pcoi-chat-message--user {
-    margin-left: var(--pcoi-spacing-48);
+    margin-left: var(--pcoi-semantic-spacing-inline-xl);
   }
 
   .pcoi-chat-message--assistant {
-    margin-right: var(--pcoi-spacing-48);
+    margin-right: var(--pcoi-semantic-spacing-inline-xl);
   }
 }

package/src/ChatMessageList/ChatMessageList.css

@@ -11,14 +11,14 @@
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-16);
-  padding: var(--pcoi-spacing-16);
+  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-spacing-20);
-    padding: var(--pcoi-spacing-24);
+    gap: var(--pcoi-semantic-spacing-card-gap);
+    padding: var(--pcoi-semantic-spacing-panel-padding);
   }
 }

package/src/ChatMessageList/ChatMessageList.test.tsx

@@ -0,0 +1,74 @@
+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/Checkbox/Checkbox.css

@@ -3,13 +3,13 @@
 .pcoi-checkbox {
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-6);
+  gap: var(--pcoi-semantic-spacing-form-gap-compact);
 }
 
 .pcoi-checkbox__control {
   display: inline-flex;
   align-items: center;
-  gap: var(--pcoi-spacing-8);
+  gap: var(--pcoi-semantic-spacing-inline-sm);
   cursor: pointer;
 }
 
@@ -26,11 +26,11 @@
 }
 
 .pcoi-checkbox__box {
-  width: var(--pcoi-layout-component-control-box);
-  height: var(--pcoi-layout-component-control-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-radius-sm);
+  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);
@@ -87,7 +87,7 @@
   font-size: var(--pcoi-semantic-type-label-size);
   color: var(--pcoi-semantic-text-error);
   margin: 0;
-  padding-left: calc(var(--pcoi-layout-component-control-box) + var(--pcoi-spacing-8));
+  padding-left: calc(var(--pcoi-semantic-sizing-control-box-size) + var(--pcoi-semantic-spacing-inline-sm));
 }
 
 /* ── Disabled state ── */

package/src/CitationMark/CitationMark.css

@@ -6,7 +6,7 @@
   justify-content: center;
   min-width: 32px;
   min-height: 32px;
-  padding: var(--pcoi-spacing-4) var(--pcoi-spacing-10);
+  padding: var(--pcoi-semantic-spacing-inline-2xs) var(--pcoi-semantic-spacing-chip-x);
   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);
@@ -14,7 +14,7 @@
   color: var(--pcoi-semantic-text-accent);
   background: var(--pcoi-semantic-surface-accent-dim);
   border: 1px solid var(--pcoi-semantic-border-accent-dim);
-  border-radius: var(--pcoi-radius-full);
+  border-radius: var(--pcoi-semantic-radius-badge);
   cursor: pointer;
   vertical-align: middle;
   transition:
@@ -26,7 +26,7 @@
 
 .pcoi-citation-mark:hover {
   color: var(--pcoi-semantic-text-accent-hover);
-  background: var(--pcoi-color-accent-dim);
+  background: var(--pcoi-semantic-surface-accent-dim);
   border-color: var(--pcoi-semantic-border-accent-subtle);
 }