From bae8c9177646937752586dcbc7703d2db5662ffe Mon Sep 17 00:00:00 2001
From: Jason Heddings <jason.heddings@workday.com>
Date: Mon, 30 Mar 2026 17:24:34 -0600
Subject: [PATCH 1/2] feat(examples): add directory example with Canvas Kit and
 data bindings

Migrates the we-next demo app as the "directory" example plugin:
- Employee/Department .businessobject model files and seed data
- Home dashboard, employee list with detail, and spotlight pages
- Canvas Kit components with Roboto font and token CSS
- DataProvider + HttpResolver wired through the plugin provider
- Generated typed hooks via `everywhere bind .`

Also narrows generated hook return types (list vs single) and removes
CSS style containment from StyleBoundary to allow CSS custom properties
from design systems like Canvas Kit to inherit correctly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 cli/src/codegen/generator.ts                  |   9 +-
 examples/.justfile                            |   1 +
 examples/directory/.data/Department.json      |  32 +++++
 examples/directory/.data/Employee.json        |  86 +++++++++++++
 examples/directory/everywhere/.config.json    |   3 +
 .../directory/everywhere/data/Department.ts   |  16 +++
 .../directory/everywhere/data/Employee.ts     |  16 +++
 examples/directory/everywhere/data/index.ts   |   6 +
 examples/directory/everywhere/data/models.ts  |  21 ++++
 examples/directory/everywhere/data/schema.ts  |  32 +++++
 .../directory/model/Department.businessobject |  14 +++
 .../directory/model/Employee.businessobject   |  20 +++
 examples/directory/package.json               |  16 +++
 examples/directory/pages/EmployeeList.tsx     | 118 ++++++++++++++++++
 examples/directory/pages/Home.tsx             |  90 +++++++++++++
 examples/directory/pages/Spotlight.tsx        |  93 ++++++++++++++
 examples/directory/plugin.tsx                 |  28 +++++
 examples/directory/styles.css                 |   1 +
 src/components/StyleBoundary.tsx              |   2 +-
 tests/components/StyleBoundary.test.tsx       |   4 +-
 20 files changed, 603 insertions(+), 5 deletions(-)
 create mode 100644 examples/directory/.data/Department.json
 create mode 100644 examples/directory/.data/Employee.json
 create mode 100644 examples/directory/everywhere/.config.json
 create mode 100644 examples/directory/everywhere/data/Department.ts
 create mode 100644 examples/directory/everywhere/data/Employee.ts
 create mode 100644 examples/directory/everywhere/data/index.ts
 create mode 100644 examples/directory/everywhere/data/models.ts
 create mode 100644 examples/directory/everywhere/data/schema.ts
 create mode 100644 examples/directory/model/Department.businessobject
 create mode 100644 examples/directory/model/Employee.businessobject
 create mode 100644 examples/directory/package.json
 create mode 100644 examples/directory/pages/EmployeeList.tsx
 create mode 100644 examples/directory/pages/Home.tsx
 create mode 100644 examples/directory/pages/Spotlight.tsx
 create mode 100644 examples/directory/plugin.tsx
 create mode 100644 examples/directory/styles.css

diff --git a/cli/src/codegen/generator.ts b/cli/src/codegen/generator.ts
index 7be1ad9..2da2f84 100644
--- a/cli/src/codegen/generator.ts
+++ b/cli/src/codegen/generator.ts
@@ -85,14 +85,19 @@ export function generateModelHooks(schema: ModelSchema): string {
   const lines = [HEADER];
 
   lines.push("import { useQuery, useMutation } from '@workday/everywhere';");
+  lines.push(`import type { QueryResult } from '@workday/everywhere';`);
   lines.push(`import type { ${name} } from './models.js';`);
   lines.push('');
   lines.push(`export function use${plural}(options?: Parameters<typeof useQuery>[1]) {`);
-  lines.push(`  return useQuery<${name}>('${name}', options);`);
+  lines.push(
+    `  return useQuery<${name}>('${name}', options) as QueryResult<${name}> & { data: ${name}[] | null };`
+  );
   lines.push('}');
   lines.push('');
   lines.push(`export function use${name}(id: string) {`);
-  lines.push(`  return useQuery<${name}>('${name}', { id });`);
+  lines.push(
+    `  return useQuery<${name}>('${name}', { id }) as QueryResult<${name}> & { data: ${name} | null };`
+  );
   lines.push('}');
   lines.push('');
   lines.push(`export function use${name}Mutation() {`);
diff --git a/examples/.justfile b/examples/.justfile
index 203796f..ce40b1f 100644
--- a/examples/.justfile
+++ b/examples/.justfile
@@ -3,6 +3,7 @@
 # Install example plugin dependencies
 setup:
     cd hello && npm install
+    cd directory && npm install
 
 # Format example source files
 tidy:
diff --git a/examples/directory/.data/Department.json b/examples/directory/.data/Department.json
new file mode 100644
index 0000000..4f8ae19
--- /dev/null
+++ b/examples/directory/.data/Department.json
@@ -0,0 +1,32 @@
+[
+  {
+    "id": "dept-eng",
+    "name": "Engineering",
+    "manager": "emp-007",
+    "headcount": 4
+  },
+  {
+    "id": "dept-sales",
+    "name": "Sales",
+    "manager": "emp-008",
+    "headcount": 2
+  },
+  {
+    "id": "dept-mktg",
+    "name": "Marketing",
+    "manager": "emp-004",
+    "headcount": 1
+  },
+  {
+    "id": "dept-hr",
+    "name": "Human Resources",
+    "manager": "emp-005",
+    "headcount": 1
+  },
+  {
+    "id": "dept-fin",
+    "name": "Finance",
+    "manager": "emp-010",
+    "headcount": 2
+  }
+]
diff --git a/examples/directory/.data/Employee.json b/examples/directory/.data/Employee.json
new file mode 100644
index 0000000..08b58b5
--- /dev/null
+++ b/examples/directory/.data/Employee.json
@@ -0,0 +1,86 @@
+[
+  {
+    "id": "emp-001",
+    "name": "Alice Chen",
+    "email": "alice.chen@example.com",
+    "department": "Engineering",
+    "title": "Senior Software Engineer",
+    "startDate": "2021-03-15",
+    "photoUrl": "https://placehold.co/100x100/e2e8f0/475569?text=AC",
+    "isActive": true
+  },
+  {
+    "id": "emp-002",
+    "name": "Bob Martinez",
+    "email": "bob.martinez@example.com",
+    "department": "Engineering",
+    "title": "Staff Engineer",
+    "startDate": "2019-07-01",
+    "photoUrl": "https://placehold.co/100x100/e2e8f0/475569?text=BM",
+    "isRemote": true,
+    "bio": "Good chef."
+  },
+  {
+    "id": "emp-004",
+    "name": "David Kim",
+    "email": "david.kim@example.com",
+    "department": "Marketing",
+    "title": "Marketing Manager",
+    "startDate": "2020-11-20",
+    "photoUrl": "https://placehold.co/100x100/e2e8f0/475569?text=DK"
+  },
+  {
+    "id": "emp-005",
+    "name": "Elena Rodriguez",
+    "email": "elena.rodriguez@example.com",
+    "department": "Human Resources",
+    "title": "HR Director",
+    "startDate": "2018-05-01",
+    "photoUrl": "https://placehold.co/100x100/e2e8f0/475569?text=ER"
+  },
+  {
+    "id": "emp-006",
+    "name": "Frank O'Brien",
+    "email": "frank.obrien@example.com",
+    "department": "Finance",
+    "title": "Financial Analyst",
+    "startDate": "2023-02-14",
+    "photoUrl": "https://placehold.co/100x100/e2e8f0/475569?text=FO"
+  },
+  {
+    "id": "emp-007",
+    "name": "Grace Tanaka",
+    "email": "grace.tanaka@example.com",
+    "department": "Engineering",
+    "title": "Engineering Manager",
+    "startDate": "2020-08-03",
+    "photoUrl": "https://placehold.co/100x100/e2e8f0/475569?text=GT"
+  },
+  {
+    "id": "emp-008",
+    "name": "Hasan Patel",
+    "email": "hasan.patel@example.com",
+    "department": "Sales",
+    "title": "Sales Director",
+    "startDate": "2019-04-22",
+    "photoUrl": "https://placehold.co/100x100/e2e8f0/475569?text=HP"
+  },
+  {
+    "id": "emp-009",
+    "name": "Iris Johansson",
+    "email": "iris.johansson@example.com",
+    "department": "Engineering",
+    "title": "Frontend Developer",
+    "startDate": "2023-09-05",
+    "photoUrl": "https://placehold.co/100x100/e2e8f0/475569?text=IJ"
+  },
+  {
+    "id": "emp-010",
+    "name": "James Wright",
+    "email": "james.wright@example.com",
+    "department": "Finance",
+    "title": "VP of Finance",
+    "startDate": "2017-01-15",
+    "photoUrl": "https://placehold.co/100x100/e2e8f0/475569?text=JW"
+  }
+]
diff --git a/examples/directory/everywhere/.config.json b/examples/directory/everywhere/.config.json
new file mode 100644
index 0000000..14d4e31
--- /dev/null
+++ b/examples/directory/everywhere/.config.json
@@ -0,0 +1,3 @@
+{
+  "extend": "/Users/jason.heddings/Projects/workday/everywhere/sdk/.worktrees/fizzy-flamingo/examples/directory"
+}
diff --git a/examples/directory/everywhere/data/Department.ts b/examples/directory/everywhere/data/Department.ts
new file mode 100644
index 0000000..7b2aa0c
--- /dev/null
+++ b/examples/directory/everywhere/data/Department.ts
@@ -0,0 +1,16 @@
+// AUTO-GENERATED by `everywhere bind` -- do not edit manually.
+
+import { useQuery, useMutation } from '@workday/everywhere';
+import type { Department } from './models.js';
+
+export function useDepartments(options?: Parameters<typeof useQuery>[1]) {
+  return useQuery<Department>('Department', options);
+}
+
+export function useDepartment(id: string) {
+  return useQuery<Department>('Department', { id });
+}
+
+export function useDepartmentMutation() {
+  return useMutation<Department>('Department');
+}
diff --git a/examples/directory/everywhere/data/Employee.ts b/examples/directory/everywhere/data/Employee.ts
new file mode 100644
index 0000000..23eafc5
--- /dev/null
+++ b/examples/directory/everywhere/data/Employee.ts
@@ -0,0 +1,16 @@
+// AUTO-GENERATED by `everywhere bind` -- do not edit manually.
+
+import { useQuery, useMutation } from '@workday/everywhere';
+import type { Employee } from './models.js';
+
+export function useEmployees(options?: Parameters<typeof useQuery>[1]) {
+  return useQuery<Employee>('Employee', options);
+}
+
+export function useEmployee(id: string) {
+  return useQuery<Employee>('Employee', { id });
+}
+
+export function useEmployeeMutation() {
+  return useMutation<Employee>('Employee');
+}
diff --git a/examples/directory/everywhere/data/index.ts b/examples/directory/everywhere/data/index.ts
new file mode 100644
index 0000000..71fb73d
--- /dev/null
+++ b/examples/directory/everywhere/data/index.ts
@@ -0,0 +1,6 @@
+// AUTO-GENERATED by `everywhere bind` -- do not edit manually.
+
+export * from './models.js';
+export * from './schema.js';
+export * from './Department.js';
+export * from './Employee.js';
diff --git a/examples/directory/everywhere/data/models.ts b/examples/directory/everywhere/data/models.ts
new file mode 100644
index 0000000..b1da92e
--- /dev/null
+++ b/examples/directory/everywhere/data/models.ts
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by `everywhere bind` -- do not edit manually.
+
+export interface Department {
+  id: string;
+  name: string;
+  manager: string;
+  headcount: string;
+}
+
+export interface Employee {
+  id: string;
+  name: string;
+  email: string;
+  department: string;
+  title: string;
+  startDate: string;
+  photoUrl: string;
+  isActive: boolean;
+  isRemote: boolean;
+  bio: string;
+}
diff --git a/examples/directory/everywhere/data/schema.ts b/examples/directory/everywhere/data/schema.ts
new file mode 100644
index 0000000..9837887
--- /dev/null
+++ b/examples/directory/everywhere/data/schema.ts
@@ -0,0 +1,32 @@
+// AUTO-GENERATED by `everywhere bind` -- do not edit manually.
+
+import type { ModelSchema } from '@workday/everywhere';
+
+export const schemas: Record<string, ModelSchema> = {
+  Department: {
+    name: 'Department',
+    label: 'Department',
+    collection: 'departments',
+    fields: [
+      { name: 'name', type: 'TEXT' },
+      { name: 'manager', type: 'SINGLE_INSTANCE', target: 'Employee' },
+      { name: 'headcount', type: 'TEXT' },
+    ],
+  },
+  Employee: {
+    name: 'Employee',
+    label: 'Employee',
+    collection: 'employees',
+    fields: [
+      { name: 'name', type: 'TEXT' },
+      { name: 'email', type: 'TEXT' },
+      { name: 'department', type: 'TEXT' },
+      { name: 'title', type: 'TEXT' },
+      { name: 'startDate', type: 'DATE', precision: 'DAY' },
+      { name: 'photoUrl', type: 'TEXT' },
+      { name: 'isActive', type: 'BOOLEAN' },
+      { name: 'isRemote', type: 'BOOLEAN' },
+      { name: 'bio', type: 'TEXT' },
+    ],
+  },
+};
diff --git a/examples/directory/model/Department.businessobject b/examples/directory/model/Department.businessobject
new file mode 100644
index 0000000..11499be
--- /dev/null
+++ b/examples/directory/model/Department.businessobject
@@ -0,0 +1,14 @@
+{
+  "id": 2,
+  "name": "Department",
+  "label": "Department",
+  "defaultCollection": {
+    "name": "departments",
+    "label": "Departments"
+  },
+  "fields": [
+    { "id": 1, "name": "name", "type": "TEXT", "useForDisplay": true },
+    { "id": 2, "name": "manager", "type": "SINGLE_INSTANCE", "target": "Employee" },
+    { "id": 3, "name": "headcount", "type": "TEXT" }
+  ]
+}
diff --git a/examples/directory/model/Employee.businessobject b/examples/directory/model/Employee.businessobject
new file mode 100644
index 0000000..a310588
--- /dev/null
+++ b/examples/directory/model/Employee.businessobject
@@ -0,0 +1,20 @@
+{
+  "id": 1,
+  "name": "Employee",
+  "label": "Employee",
+  "defaultCollection": {
+    "name": "employees",
+    "label": "Employees"
+  },
+  "fields": [
+    { "id": 1, "name": "name", "type": "TEXT", "useForDisplay": true },
+    { "id": 2, "name": "email", "type": "TEXT" },
+    { "id": 3, "name": "department", "type": "TEXT" },
+    { "id": 4, "name": "title", "type": "TEXT" },
+    { "id": 5, "name": "startDate", "type": "DATE", "precision": "DAY" },
+    { "id": 6, "name": "photoUrl", "type": "TEXT" },
+    { "id": 7, "name": "isActive", "type": "BOOLEAN" },
+    { "id": 8, "name": "isRemote", "type": "BOOLEAN" },
+    { "id": 9, "name": "bio", "type": "TEXT" }
+  ]
+}
diff --git a/examples/directory/package.json b/examples/directory/package.json
new file mode 100644
index 0000000..13c5cf9
--- /dev/null
+++ b/examples/directory/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "employee-directory",
+  "version": "1.0.0",
+  "description": "Search and manage employee records.",
+  "private": true,
+  "scripts": {
+    "preview": "everywhere view",
+    "clean": "rm -rf node_modules"
+  },
+  "dependencies": {
+    "@workday/canvas-kit-react": "^11",
+    "@workday/everywhere": "file:../..",
+    "react": "^19",
+    "react-dom": "^19"
+  }
+}
diff --git a/examples/directory/pages/EmployeeList.tsx b/examples/directory/pages/EmployeeList.tsx
new file mode 100644
index 0000000..fd33c3e
--- /dev/null
+++ b/examples/directory/pages/EmployeeList.tsx
@@ -0,0 +1,118 @@
+import { useNavigate, useParams } from '@workday/everywhere';
+import { Card, Flex, Heading, SecondaryButton, Text } from '@workday/canvas-kit-react';
+import { useEmployees, useEmployee } from '../everywhere/data/Employee.js';
+import type { Employee } from '../everywhere/data/models.js';
+
+function EmployeeDetail() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const { data: employee } = useEmployee(id ?? '');
+
+  return (
+    <Flex flexDirection="column" gap="s" padding="s">
+      <SecondaryButton size="small" onClick={() => navigate('employees')}>
+        Back to list
+      </SecondaryButton>
+      <Card>
+        <Card.Heading>{employee?.name ?? 'Employee Detail'}</Card.Heading>
+        <Card.Body>
+          {employee ? (
+            <Flex gap="m">
+              <img
+                src={employee.photoUrl}
+                alt={employee.name}
+                style={{ width: 80, height: 80, borderRadius: 8 }}
+              />
+              <Flex flexDirection="column" gap="xxs">
+                <Text typeLevel="body.large" fontWeight="bold">
+                  {employee.title}
+                </Text>
+                <Text typeLevel="body.small" color="licorice300">
+                  {employee.department}
+                </Text>
+                <Text typeLevel="body.small">{employee.email}</Text>
+                <Text typeLevel="subtext.medium" color="licorice300">
+                  Started {employee.startDate}
+                </Text>
+                {employee.isRemote && (
+                  <Text typeLevel="subtext.medium" color="blueberry400">
+                    Remote
+                  </Text>
+                )}
+                {employee.bio && (
+                  <Text typeLevel="body.small" style={{ marginTop: 8 }}>
+                    {employee.bio}
+                  </Text>
+                )}
+              </Flex>
+            </Flex>
+          ) : (
+            <Text>Employee not found: {id}</Text>
+          )}
+        </Card.Body>
+      </Card>
+    </Flex>
+  );
+}
+
+function EmployeeRow({ employee, onClick }: { employee: Employee; onClick: () => void }) {
+  return (
+    <Flex
+      alignItems="center"
+      gap="s"
+      padding="xs"
+      style={{ cursor: 'pointer', borderRadius: 8 }}
+      onClick={onClick}
+    >
+      <img
+        src={employee.photoUrl}
+        alt={employee.name}
+        style={{ width: 40, height: 40, borderRadius: '50%' }}
+      />
+      <Flex flexDirection="column" flex={1}>
+        <Text typeLevel="body.small" fontWeight="bold">
+          {employee.name}
+        </Text>
+        <Text typeLevel="subtext.medium" color="licorice300">
+          {employee.title}
+        </Text>
+      </Flex>
+      <Text typeLevel="subtext.medium" color="licorice300">
+        {employee.department}
+      </Text>
+    </Flex>
+  );
+}
+
+export default function EmployeeListPage() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const { data: employees } = useEmployees();
+
+  if (id) {
+    return <EmployeeDetail />;
+  }
+
+  return (
+    <Flex flexDirection="column" gap="m" padding="s">
+      <Heading size="large">Employees</Heading>
+      <Text typeLevel="body.large" color="licorice300">
+        {Array.isArray(employees) ? `${employees.length} employees` : 'Loading...'}
+      </Text>
+      <Card>
+        <Card.Body>
+          <Flex flexDirection="column" gap="xxs">
+            {Array.isArray(employees) &&
+              employees.map((emp) => (
+                <EmployeeRow
+                  key={emp.id}
+                  employee={emp}
+                  onClick={() => navigate('employees/detail', { id: emp.id })}
+                />
+              ))}
+          </Flex>
+        </Card.Body>
+      </Card>
+    </Flex>
+  );
+}
diff --git a/examples/directory/pages/Home.tsx b/examples/directory/pages/Home.tsx
new file mode 100644
index 0000000..ebe39af
--- /dev/null
+++ b/examples/directory/pages/Home.tsx
@@ -0,0 +1,90 @@
+import { useMemo } from 'react';
+import { useNavigate } from '@workday/everywhere';
+import { Card, Flex, Grid, Heading, SecondaryButton, Text } from '@workday/canvas-kit-react';
+import { useEmployees } from '../everywhere/data/Employee.js';
+import { useDepartments } from '../everywhere/data/Department.js';
+
+function StatCard({ label, value, subtitle }: { label: string; value: string; subtitle: string }) {
+  return (
+    <Card>
+      <Card.Body>
+        <Flex flexDirection="column" alignItems="center" gap="xxs" padding="xs">
+          <Text typeLevel="subtext.large" color="licorice300">
+            {label}
+          </Text>
+          <Text typeLevel="title.large" color="blueberry400" fontWeight="bold">
+            {value}
+          </Text>
+          <Text typeLevel="subtext.medium" color="licorice300" fontStyle="italic">
+            {subtitle}
+          </Text>
+        </Flex>
+      </Card.Body>
+    </Card>
+  );
+}
+
+export default function HomePage() {
+  const navigate = useNavigate();
+  const { data: employees } = useEmployees();
+  const { data: departments } = useDepartments();
+
+  const totalEmployees = employees?.length ?? 0;
+
+  const deptStats = useMemo(() => {
+    if (!departments || !Array.isArray(departments)) return [];
+    return departments.map((dept) => {
+      const count = Array.isArray(employees)
+        ? employees.filter((e) => e.department === dept.name).length
+        : Number(dept.headcount);
+      return { ...dept, count };
+    });
+  }, [employees, departments, totalEmployees]);
+
+  return (
+    <Flex flexDirection="column" gap="m" padding="s">
+      <Heading size="large">Employee Directory</Heading>
+
+      <Text typeLevel="body.large">
+        Welcome to the Employee Directory. Search for colleagues, view team information, and manage
+        employee records.
+      </Text>
+
+      <Card>
+        <Card.Body>
+          <Heading size="small" marginBottom="s">
+            Team Overview
+          </Heading>
+          <Grid gridTemplateColumns="repeat(4, 1fr)" gridGap="s">
+            <StatCard
+              label="Total Employees"
+              value={String(totalEmployees)}
+              subtitle="All departments"
+            />
+            {deptStats.slice(0, 3).map((dept) => (
+              <StatCard
+                key={dept.id}
+                label={dept.name}
+                value={String(dept.count)}
+                subtitle="Employees"
+              />
+            ))}
+          </Grid>
+        </Card.Body>
+      </Card>
+
+      <Card>
+        <Card.Body>
+          <Heading size="small" marginBottom="s">
+            Quick Actions
+          </Heading>
+          <Flex gap="s">
+            <SecondaryButton onClick={() => navigate('employees')}>
+              View All Employees
+            </SecondaryButton>
+          </Flex>
+        </Card.Body>
+      </Card>
+    </Flex>
+  );
+}
diff --git a/examples/directory/pages/Spotlight.tsx b/examples/directory/pages/Spotlight.tsx
new file mode 100644
index 0000000..a8dae0b
--- /dev/null
+++ b/examples/directory/pages/Spotlight.tsx
@@ -0,0 +1,93 @@
+import { useCallback, useMemo, useState } from 'react';
+import { Card, Flex, Heading, PrimaryButton, Text } from '@workday/canvas-kit-react';
+import { useEmployees } from '../everywhere/data/Employee.js';
+
+export default function SpotlightPage() {
+  const { data: employees } = useEmployees();
+  const [index, setIndex] = useState(() => Math.floor(Math.random() * 1000));
+
+  const employee = useMemo(() => {
+    if (!Array.isArray(employees) || employees.length === 0) return undefined;
+    return employees[index % employees.length];
+  }, [employees, index]);
+
+  const reroll = useCallback(() => {
+    setIndex((prev) => {
+      let next;
+      do {
+        next = Math.floor(Math.random() * 1000);
+      } while (
+        Array.isArray(employees) &&
+        employees.length > 1 &&
+        next % employees.length === prev % employees.length
+      );
+      return next;
+    });
+  }, [employees]);
+
+  if (!Array.isArray(employees)) {
+    return (
+      <Flex flexDirection="column" gap="m" padding="s">
+        <Heading size="large">Spotlight</Heading>
+        <Text typeLevel="body.large" color="licorice300">
+          Loading...
+        </Text>
+      </Flex>
+    );
+  }
+
+  if (!employee) {
+    return (
+      <Flex flexDirection="column" gap="m" padding="s">
+        <Heading size="large">Spotlight</Heading>
+        <Text typeLevel="body.large" color="licorice300">
+          No employees found.
+        </Text>
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex flexDirection="column" gap="m" padding="s">
+      <Heading size="large">Spotlight</Heading>
+      <Text typeLevel="body.large" color="licorice300">
+        Meet your coworker!
+      </Text>
+      <Card>
+        <Card.Heading>{employee.name}</Card.Heading>
+        <Card.Body>
+          <Flex gap="m">
+            <img
+              src={employee.photoUrl}
+              alt={employee.name}
+              style={{ width: 100, height: 100, borderRadius: 8 }}
+            />
+            <Flex flexDirection="column" gap="xxs">
+              <Text typeLevel="body.large" fontWeight="bold">
+                {employee.title}
+              </Text>
+              <Text typeLevel="body.small" color="licorice300">
+                {employee.department}
+              </Text>
+              <Text typeLevel="body.small">{employee.email}</Text>
+              <Text typeLevel="subtext.medium" color="licorice300">
+                Started {employee.startDate}
+              </Text>
+              {employee.isRemote && (
+                <Text typeLevel="subtext.medium" color="blueberry400">
+                  Remote
+                </Text>
+              )}
+              {employee.bio && (
+                <Text typeLevel="body.small" style={{ marginTop: 8 }}>
+                  {employee.bio}
+                </Text>
+              )}
+            </Flex>
+          </Flex>
+        </Card.Body>
+      </Card>
+      <PrimaryButton onClick={reroll}>Meet Someone New</PrimaryButton>
+    </Flex>
+  );
+}
diff --git a/examples/directory/plugin.tsx b/examples/directory/plugin.tsx
new file mode 100644
index 0000000..ac192f8
--- /dev/null
+++ b/examples/directory/plugin.tsx
@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+import { plugin, DataProvider, HttpResolver } from '@workday/everywhere';
+import { CanvasProvider } from '@workday/canvas-kit-react';
+import '@workday/canvas-tokens-web/css/base/_variables.css';
+import '@workday/canvas-tokens-web/css/system/_variables.css';
+import './styles.css';
+import HomePage from './pages/Home.js';
+import EmployeeListPage from './pages/EmployeeList.js';
+import SpotlightPage from './pages/Spotlight.js';
+
+const resolver = new HttpResolver('/api/data');
+
+function DirectoryProvider({ children }: { children: ReactNode }) {
+  return (
+    <CanvasProvider>
+      <DataProvider resolver={resolver}>{children}</DataProvider>
+    </CanvasProvider>
+  );
+}
+
+export default plugin({
+  provider: DirectoryProvider,
+  pages: [
+    { id: 'home', title: 'Home', component: HomePage },
+    { id: 'employees', title: 'Employees', component: EmployeeListPage },
+    { id: 'spotlight', title: 'Spotlight', component: SpotlightPage },
+  ],
+});
diff --git a/examples/directory/styles.css b/examples/directory/styles.css
new file mode 100644
index 0000000..612e912
--- /dev/null
+++ b/examples/directory/styles.css
@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
diff --git a/src/components/StyleBoundary.tsx b/src/components/StyleBoundary.tsx
index fa1ab63..99366af 100644
--- a/src/components/StyleBoundary.tsx
+++ b/src/components/StyleBoundary.tsx
@@ -7,5 +7,5 @@ export interface StyleBoundaryProps {
 
 export function StyleBoundary({ children, provider: Provider }: StyleBoundaryProps) {
   const content = Provider ? <Provider>{children}</Provider> : children;
-  return <div style={{ contain: 'style' }}>{content}</div>;
+  return <div>{content}</div>;
 }
diff --git a/tests/components/StyleBoundary.test.tsx b/tests/components/StyleBoundary.test.tsx
index ff33b83..3fa545f 100644
--- a/tests/components/StyleBoundary.test.tsx
+++ b/tests/components/StyleBoundary.test.tsx
@@ -14,14 +14,14 @@ describe('StyleBoundary', () => {
       expect(html).toContain('<span>hello</span>');
     });
 
-    it('wraps content in a div with contain:style', () => {
+    it('wraps content in a div', () => {
       const html = renderToStaticMarkup(
         <StyleBoundary>
           <span>content</span>
         </StyleBoundary>
       );
 
-      expect(html).toContain('style="contain:style"');
+      expect(html).toContain('<div><span>content</span></div>');
     });
   });
 

From 839091cbd8efd0db34ccaa73324cc5a3bf7e7447 Mon Sep 17 00:00:00 2001
From: Jason Heddings <jason.heddings@workday.com>
Date: Mon, 30 Mar 2026 17:26:54 -0600
Subject: [PATCH 2/2] chore: gitignore .data/ and everywhere/.config.json

Seed data and local bind config are machine-specific and should not be
committed. Removes the accidentally tracked files from the directory
example.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .gitignore                                 |  2 +
 examples/directory/.data/Department.json   | 32 --------
 examples/directory/.data/Employee.json     | 86 ----------------------
 examples/directory/everywhere/.config.json |  3 -
 4 files changed, 2 insertions(+), 121 deletions(-)
 delete mode 100644 examples/directory/.data/Department.json
 delete mode 100644 examples/directory/.data/Employee.json
 delete mode 100644 examples/directory/everywhere/.config.json

diff --git a/.gitignore b/.gitignore
index 2316e42..26323fa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,5 @@ dist/
 cli/lib/
 cli/node_modules/
 cli/oclif.manifest.json
+.data/
+everywhere/.config.json
diff --git a/examples/directory/.data/Department.json b/examples/directory/.data/Department.json
deleted file mode 100644
index 4f8ae19..0000000
--- a/examples/directory/.data/Department.json
+++ /dev/null
@@ -1,32 +0,0 @@
-[
-  {
-    "id": "dept-eng",
-    "name": "Engineering",
-    "manager": "emp-007",
-    "headcount": 4
-  },
-  {
-    "id": "dept-sales",
-    "name": "Sales",
-    "manager": "emp-008",
-    "headcount": 2
-  },
-  {
-    "id": "dept-mktg",
-    "name": "Marketing",
-    "manager": "emp-004",
-    "headcount": 1
-  },
-  {
-    "id": "dept-hr",
-    "name": "Human Resources",
-    "manager": "emp-005",
-    "headcount": 1
-  },
-  {
-    "id": "dept-fin",
-    "name": "Finance",
-    "manager": "emp-010",
-    "headcount": 2
-  }
-]
diff --git a/examples/directory/.data/Employee.json b/examples/directory/.data/Employee.json
deleted file mode 100644
index 08b58b5..0000000
--- a/examples/directory/.data/Employee.json
+++ /dev/null
@@ -1,86 +0,0 @@
-[
-  {
-    "id": "emp-001",
-    "name": "Alice Chen",
-    "email": "alice.chen@example.com",
-    "department": "Engineering",
-    "title": "Senior Software Engineer",
-    "startDate": "2021-03-15",
-    "photoUrl": "https://placehold.co/100x100/e2e8f0/475569?text=AC",
-    "isActive": true
-  },
-  {
-    "id": "emp-002",
-    "name": "Bob Martinez",
-    "email": "bob.martinez@example.com",
-    "department": "Engineering",
-    "title": "Staff Engineer",
-    "startDate": "2019-07-01",
-    "photoUrl": "https://placehold.co/100x100/e2e8f0/475569?text=BM",
-    "isRemote": true,
-    "bio": "Good chef."
-  },
-  {
-    "id": "emp-004",
-    "name": "David Kim",
-    "email": "david.kim@example.com",
-    "department": "Marketing",
-    "title": "Marketing Manager",
-    "startDate": "2020-11-20",
-    "photoUrl": "https://placehold.co/100x100/e2e8f0/475569?text=DK"
-  },
-  {
-    "id": "emp-005",
-    "name": "Elena Rodriguez",
-    "email": "elena.rodriguez@example.com",
-    "department": "Human Resources",
-    "title": "HR Director",
-    "startDate": "2018-05-01",
-    "photoUrl": "https://placehold.co/100x100/e2e8f0/475569?text=ER"
-  },
-  {
-    "id": "emp-006",
-    "name": "Frank O'Brien",
-    "email": "frank.obrien@example.com",
-    "department": "Finance",
-    "title": "Financial Analyst",
-    "startDate": "2023-02-14",
-    "photoUrl": "https://placehold.co/100x100/e2e8f0/475569?text=FO"
-  },
-  {
-    "id": "emp-007",
-    "name": "Grace Tanaka",
-    "email": "grace.tanaka@example.com",
-    "department": "Engineering",
-    "title": "Engineering Manager",
-    "startDate": "2020-08-03",
-    "photoUrl": "https://placehold.co/100x100/e2e8f0/475569?text=GT"
-  },
-  {
-    "id": "emp-008",
-    "name": "Hasan Patel",
-    "email": "hasan.patel@example.com",
-    "department": "Sales",
-    "title": "Sales Director",
-    "startDate": "2019-04-22",
-    "photoUrl": "https://placehold.co/100x100/e2e8f0/475569?text=HP"
-  },
-  {
-    "id": "emp-009",
-    "name": "Iris Johansson",
-    "email": "iris.johansson@example.com",
-    "department": "Engineering",
-    "title": "Frontend Developer",
-    "startDate": "2023-09-05",
-    "photoUrl": "https://placehold.co/100x100/e2e8f0/475569?text=IJ"
-  },
-  {
-    "id": "emp-010",
-    "name": "James Wright",
-    "email": "james.wright@example.com",
-    "department": "Finance",
-    "title": "VP of Finance",
-    "startDate": "2017-01-15",
-    "photoUrl": "https://placehold.co/100x100/e2e8f0/475569?text=JW"
-  }
-]
diff --git a/examples/directory/everywhere/.config.json b/examples/directory/everywhere/.config.json
deleted file mode 100644
index 14d4e31..0000000
--- a/examples/directory/everywhere/.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extend": "/Users/jason.heddings/Projects/workday/everywhere/sdk/.worktrees/fizzy-flamingo/examples/directory"
-}