@chesapeake/stack 0.1.2 → 0.1.4

package/CHANGELOG.md

@@ -6,6 +6,25 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.1.4] - 2026-08-03
+
+### Added
+
+- UX task components: `TaskInput`, `TaskCard`, and `TaskList` with
+  application-neutral props and public subpath exports
+- UX connectivity component: `ConnectivityBadge` with tone/status presentation
+- UX runner presentation: `RunnerPairingCard` and `RunnerStatusCard` for pairing
+  command display and runner status chrome
+
+## [0.1.3] - 2026-03-09
+
+### Changed
+
+- `styles/index.css` now declares `@source "../components"` so Tailwind v4
+  detects the package's utility classes automatically. Consuming apps no longer
+  need to add a separate `@source` or `content` path for `@chesapeake/stack`;
+  `@import "@chesapeake/stack/styles"` is sufficient.
+
 ## [0.1.2] - 2026-03-05
 
 - `examples/` folder with copy-pasteable React examples: basic-form,
@@ -56,5 +75,8 @@ and this project adheres to
 - Full dark mode support via CSS custom properties
 - Apache 2.0 license
 
+[0.1.4]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.4
+[0.1.3]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.3
+[0.1.2]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.2
 [0.1.1]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.1
 [0.1.0]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.0

package/README.md

@@ -33,7 +33,10 @@ npm install react-day-picker vaul  # if using calendar or drawer components
 
 ### 2. Import Styles
 
-Import the shared styles in your app's main CSS file (e.g., `src/index.css`):
+Import the shared styles in your app's main CSS file (e.g., `src/index.css`).
+The package stylesheet declares its own `@source` directives for Tailwind v4
+class detection, so you do **not** need to add a separate `@source` or `content`
+path pointing at `node_modules/@chesapeake/stack`.
 
 ```css
 /* Import Tailwind, third-party CSS, and shared styles */
@@ -44,48 +47,7 @@ Import the shared styles in your app's main CSS file (e.g., `src/index.css`):
 @import "@chesapeake/stack/styles/index.css";
 ```
 
-### 3. Configure Tailwind
-
-Extend your `tailwind.config.ts` with the shared preset:
-
-```typescript
-import type { Config } from "tailwindcss";
-import sharedPreset from "@chesapeake/stack/tailwind.preset";
-
-const config: Config = {
-  content: [
-    // your app's content paths
-  ],
-  presets: [sharedPreset],
-  // your app's additional configuration
-};
-
-export default config;
-```
-
-### 4. Configure Tailwind Content
-
-Add the package to your Tailwind content configuration so classes are processed:
-
-**`tailwind.config.ts`**:
-
-```typescript
-import type { Config } from "tailwindcss";
-import sharedPreset from "@chesapeake/stack/tailwind.preset";
-
-const config: Config = {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/@chesapeake/stack/**/*.{js,ts,jsx,tsx}",
-  ],
-  presets: [sharedPreset],
-  // your app's additional configuration
-};
-
-export default config;
-```
-
-### 5. Import and Use Components
+### 3. Import and Use Components
 
 Import and use components in your React components:
 
@@ -143,6 +105,10 @@ import type {
 
 ### Available Components
 
+The UX task, connectivity, and runner components are application-neutral.
+They accept display values and callbacks; persistence, networking, runner APIs,
+and product-specific task metadata remain in the consuming application.
+
 #### UI Components (`components/ui/`)
 
 - **Button** - Various button variants and sizes

package/components/ux/connectivity/ConnectivityBadge.tsx

@@ -0,0 +1,75 @@
+import type { KeyboardEvent } from "react";
+import {
+  AlertCircle,
+  AlertTriangle,
+  Check,
+  CloudOff,
+  Loader2,
+} from "lucide-react";
+
+export type ConnectivityTone =
+  | "offline"
+  | "syncing"
+  | "online"
+  | "degraded"
+  | "conflict";
+
+export interface ConnectivityBadgeProps {
+  label: string;
+  tone: ConnectivityTone;
+  tooltip?: string;
+  onAction?: () => void;
+  actionLabel?: string;
+  locked?: boolean;
+  className?: string;
+}
+
+export function ConnectivityBadge({
+  label,
+  tone,
+  tooltip,
+  onAction,
+  actionLabel,
+  locked = false,
+  className,
+}: ConnectivityBadgeProps) {
+  const interactive = onAction != null && !locked;
+  const title = tooltip ?? label;
+  const icon =
+    tone === "syncing" ? (
+      <Loader2 className="h-4 w-4 animate-spin" />
+    ) : tone === "degraded" ? (
+      <AlertTriangle className="h-4 w-4" />
+    ) : tone === "conflict" ? (
+      <AlertCircle className="h-4 w-4" />
+    ) : tone === "online" ? (
+      <Check className="h-4 w-4" />
+    ) : (
+      <CloudOff className="h-4 w-4" />
+    );
+
+  return (
+    <div
+      role={interactive ? "button" : "status"}
+      tabIndex={interactive ? 0 : undefined}
+      aria-label={actionLabel ?? label}
+      aria-live="polite"
+      title={title}
+      className={`inline-flex h-9 items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium ${tone === "online" ? "border-primary/60 text-primary bg-primary/5" : tone === "degraded" || tone === "conflict" ? "border-destructive/50 text-destructive bg-destructive/5" : "border-muted-foreground/40 text-muted-foreground bg-muted/40"} ${interactive ? "cursor-pointer" : ""} ${className ?? ""}`}
+      onClick={interactive ? onAction : undefined}
+      onKeyDown={
+        interactive
+          ? (event: KeyboardEvent) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                onAction();
+              }
+            }
+          : undefined
+      }
+    >
+      {icon}
+      <span>{label}</span>
+    </div>
+  );
+}

package/components/ux/connectivity/index.ts

@@ -0,0 +1,5 @@
+export { ConnectivityBadge } from "./ConnectivityBadge.tsx";
+export type {
+  ConnectivityBadgeProps,
+  ConnectivityTone,
+} from "./ConnectivityBadge.tsx";

package/components/ux/index.ts

@@ -44,3 +44,7 @@ export type {
   ProfilePageProps,
   StandardLayoutProps,
 } from "./StandardLayout/index.ts";
+
+export * from "./task/index.ts";
+export * from "./connectivity/index.ts";
+export * from "./runner/index.ts";

package/components/ux/runner/RunnerPairingCard.tsx

@@ -0,0 +1,39 @@
+import { Copy } from "lucide-react";
+import { Button } from "../../ui/button.tsx";
+
+export interface RunnerPairingCardProps {
+  command: string;
+  code?: string;
+  expiresAt?: string;
+  onCopy: () => void;
+}
+
+export function RunnerPairingCard({
+  command,
+  code,
+  expiresAt,
+  onCopy,
+}: RunnerPairingCardProps) {
+  return (
+    <div className="bg-muted mt-4 space-y-2 rounded-md border p-3">
+      <p className="text-sm font-medium">Run this command on your device</p>
+      <div className="flex flex-wrap items-center gap-2">
+        <code className="bg-background min-w-0 flex-1 overflow-x-auto rounded border px-3 py-2 text-xs">
+          {command}
+        </code>
+        <Button type="button" size="sm" variant="outline" onClick={onCopy}>
+          <Copy className="mr-2 h-4 w-4" />
+          Copy
+        </Button>
+      </div>
+      {code && (
+        <p className="text-muted-foreground text-xs">
+          Code {code}
+          {expiresAt
+            ? ` expires ${new Date(expiresAt).toLocaleTimeString()}.`
+            : "."}
+        </p>
+      )}
+    </div>
+  );
+}

package/components/ux/runner/RunnerStatusCard.tsx

@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+import { Card } from "../../ui/card.tsx";
+
+export interface RunnerStatusCardProps {
+  name: string;
+  state: string;
+  details?: string;
+  repositories?: string[];
+  children?: ReactNode;
+  jobs?: ReactNode;
+}
+
+export function RunnerStatusCard({
+  name,
+  state,
+  details,
+  repositories = [],
+  children,
+  jobs,
+}: RunnerStatusCardProps) {
+  return (
+    <Card
+      className="space-y-3 rounded-md border p-4"
+      aria-label={`${name} runner`}
+    >
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <div className="flex flex-wrap items-center gap-2">
+            <h4 className="font-medium">{name}</h4>
+            <span className="bg-muted rounded-full px-2 py-0.5 text-xs">
+              {state}
+            </span>
+          </div>
+          {details && (
+            <p className="text-muted-foreground mt-1 text-xs">{details}</p>
+          )}
+        </div>
+        <div className="flex flex-wrap gap-2">{children}</div>
+      </div>
+      <div>
+        <p className="text-sm font-medium">Repository access</p>
+        {repositories.length ? (
+          <ul className="text-muted-foreground mt-1 list-inside list-disc text-sm">
+            {repositories.map((repository) => (
+              <li key={repository}>{repository}</li>
+            ))}
+          </ul>
+        ) : (
+          <p className="text-muted-foreground mt-1 text-sm">
+            No repositories registered.
+          </p>
+        )}
+      </div>
+      {jobs}
+    </Card>
+  );
+}

package/components/ux/runner/index.ts

@@ -0,0 +1,4 @@
+export { RunnerPairingCard } from "./RunnerPairingCard.tsx";
+export type { RunnerPairingCardProps } from "./RunnerPairingCard.tsx";
+export { RunnerStatusCard } from "./RunnerStatusCard.tsx";
+export type { RunnerStatusCardProps } from "./RunnerStatusCard.tsx";

package/components/ux/task/TaskCard.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Card } from "../../ui/card.tsx";
+import { Input } from "../../ui/input.tsx";
+
+export interface TaskCardProps {
+  title: string;
+  completed: boolean;
+  onToggle: () => void;
+  onTitleChange?: (title: string) => void;
+  leading?: ReactNode;
+  content?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+  newlyAdded?: boolean;
+}
+
+export function TaskCard({
+  title,
+  completed,
+  onToggle,
+  onTitleChange,
+  leading,
+  content,
+  actions,
+  className,
+  newlyAdded = false,
+}: TaskCardProps) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(title);
+  const save = () => {
+    const next = draft.trim();
+    if (next && next !== title) onTitleChange?.(next);
+    setEditing(false);
+  };
+
+  return (
+    <Card
+      role="listitem"
+      className={`bg-background min-w-0 p-4 transition-all hover:shadow-md ${
+        completed ? "bg-muted/50 opacity-75" : ""
+      } ${newlyAdded ? "animate-in slide-in-from-top-2" : ""} ${className ?? ""}`}
+    >
+      <div className="flex min-w-0 items-start gap-2 md:gap-3">
+        {leading}
+        <input
+          type="checkbox"
+          checked={completed}
+          onChange={onToggle}
+          className="mt-1 h-5 w-5 shrink-0 cursor-pointer rounded text-primary focus:ring-2 focus:ring-primary"
+          aria-label={completed ? "Mark incomplete" : "Mark complete"}
+        />
+        <div className="min-w-0 flex-1 space-y-2">
+          {editing ? (
+            <Input
+              autoFocus
+              value={draft}
+              onChange={(event) => {
+                setDraft(event.target.value);
+              }}
+              onBlur={save}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") save();
+                if (event.key === "Escape") setEditing(false);
+              }}
+              aria-label="Edit task title"
+            />
+          ) : (
+            <h3
+              className={`cursor-text transition-colors hover:text-primary ${completed ? "text-muted-foreground line-through" : ""}`}
+              onClick={() => {
+                setDraft(title);
+                if (onTitleChange) setEditing(true);
+              }}
+            >
+              {title}
+            </h3>
+          )}
+          {content}
+        </div>
+        {actions}
+      </div>
+    </Card>
+  );
+}

package/components/ux/task/TaskInput.tsx

@@ -0,0 +1,65 @@
+import { useRef } from "react";
+import type { RefObject } from "react";
+import { Button } from "../../ui/button.tsx";
+
+export interface TaskInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onAdd: () => void;
+  placeholder?: string;
+  inputRef?: RefObject<HTMLInputElement | null>;
+  className?: string;
+  inputClassName?: string;
+  addButtonLabel?: string;
+  /** Optional attribute for consumer product tours / E2E hooks. */
+  inputDataTour?: string;
+}
+
+export function TaskInput({
+  value,
+  onChange,
+  onAdd,
+  placeholder = "Add a task...",
+  inputRef,
+  className,
+  inputClassName,
+  addButtonLabel = "Add task",
+  inputDataTour,
+}: TaskInputProps) {
+  const internalRef = useRef<HTMLInputElement>(null);
+  const ref = inputRef ?? internalRef;
+
+  return (
+    <div
+      className={`border-border bg-background border-b p-4 ${className ?? ""}`}
+    >
+      <div className="flex gap-2">
+        <input
+          ref={ref}
+          data-tour={inputDataTour}
+          className={`border-border bg-background text-foreground placeholder:text-muted-foreground flex-1 rounded border px-2 py-1 ${inputClassName ?? ""}`}
+          value={value}
+          onChange={(event) => {
+            onChange(event.target.value);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") onAdd();
+          }}
+          placeholder={placeholder}
+          aria-label={placeholder}
+        />
+        <Button
+          type="button"
+          variant="default"
+          size="icon"
+          onClick={onAdd}
+          aria-label={addButtonLabel}
+        >
+          <span aria-hidden="true" className="text-xl leading-none">
+            +
+          </span>
+        </Button>
+      </div>
+    </div>
+  );
+}

package/components/ux/task/TaskList.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+
+export interface TaskListProps {
+  children: ReactNode;
+  loading?: boolean;
+  empty?: ReactNode;
+  className?: string;
+}
+
+export function TaskList({
+  children,
+  loading = false,
+  empty,
+  className,
+}: TaskListProps) {
+  const content = loading ? (
+    <div className="text-muted-foreground p-8 text-center" role="status">
+      Loading tasks...
+    </div>
+  ) : (
+    (empty ?? children)
+  );
+
+  return (
+    <div
+      className={`flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto p-4 ${className ?? ""}`}
+      role="list"
+    >
+      {content}
+    </div>
+  );
+}

package/components/ux/task/index.ts

@@ -0,0 +1,6 @@
+export { TaskCard } from "./TaskCard.tsx";
+export type { TaskCardProps } from "./TaskCard.tsx";
+export { TaskInput } from "./TaskInput.tsx";
+export type { TaskInputProps } from "./TaskInput.tsx";
+export { TaskList } from "./TaskList.tsx";
+export type { TaskListProps } from "./TaskList.tsx";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chesapeake/stack",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "A simple, reusable React component library and design system built on shadcn/ui with Tailwind CSS",
   "type": "module",
   "packageManager": "npm@10.2.0",
@@ -107,6 +107,15 @@
     "./components/ux/auth/google/AuthProvider": "./components/ux/auth/google/AuthProvider.tsx",
     "./components/ux/auth/google/AuthCallback": "./components/ux/auth/google/AuthCallback.tsx",
     "./components/ux/auth/google/types": "./components/ux/auth/google/types.ts",
+    "./components/ux/task": "./components/ux/task/index.ts",
+    "./components/ux/task/TaskInput": "./components/ux/task/TaskInput.tsx",
+    "./components/ux/task/TaskCard": "./components/ux/task/TaskCard.tsx",
+    "./components/ux/task/TaskList": "./components/ux/task/TaskList.tsx",
+    "./components/ux/connectivity": "./components/ux/connectivity/index.ts",
+    "./components/ux/connectivity/ConnectivityBadge": "./components/ux/connectivity/ConnectivityBadge.tsx",
+    "./components/ux/runner": "./components/ux/runner/index.ts",
+    "./components/ux/runner/RunnerPairingCard": "./components/ux/runner/RunnerPairingCard.tsx",
+    "./components/ux/runner/RunnerStatusCard": "./components/ux/runner/RunnerStatusCard.tsx",
     "./components/ux/auth/github": "./components/ux/auth/github/index.ts",
     "./components/ux/auth/github/client": "./components/ux/auth/github/client.ts",
     "./components/ux/auth/github/default-client": "./components/ux/auth/github/default-client.ts",

package/styles/index.css

@@ -1,5 +1,6 @@
 /* Chesapeake Shared Styles */
 @import "tailwindcss";
+@source "../components";
 
 /* Design tokens and base styles */
 @import "./tokens.css";