@pega/sdk 0.0.3 → 0.0.5

package/templates/react-sdk-reference/src/components/widget/SummaryItem/SummaryItem.tsx

@@ -30,7 +30,7 @@ export default function SummaryItem(props: SummaryItemProps) {
     props.menuIconOverrideAction$(item);
   }
 
-  const handleClick = event => {
+  const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
   };
 
@@ -39,43 +39,50 @@ export default function SummaryItem(props: SummaryItemProps) {
   };
 
   return (
-    <div className='psdk-utility-card'>
-      <div className='psdk-utility-card-icon'>
-        <img className='psdk-utility-card-svg-icon' src={srcImg} />
+    <div className="psdk-utility-card">
+      <div className="psdk-utility-card-icon">
+        <img className="psdk-utility-card-svg-icon" src={srcImg} />
       </div>
-      <div className='psdk-utility-card-main'>
-        {item.primary.type !== 'URL' && <div className='psdk-utility-card-main-primary-label'>{item.primary.name}</div>}
+      <div className="psdk-utility-card-main">
+        {item.primary.type !== 'URL' && <div className="psdk-utility-card-main-primary-label">{item.primary.name}</div>}
         {item.primary.type === 'URL' && (
-          <div className='psdk-utility-card-main-primary-url'>
-            <button type='button' className='psdk-utility-link-button'>
+          <div className="psdk-utility-card-main-primary-url">
+            <button type="button" className="psdk-utility-link-button">
               {item.primary.name}&nbsp;
-              <img className='psdk-utility-card-actions-svg-icon' src={`${imagePath$}${item.primary.icon}.svg`} />
+              <img className="psdk-utility-card-actions-svg-icon" src={`${imagePath$}${item.primary.icon}.svg`} />
             </button>
           </div>
         )}
-        {item.secondary.text && <div style={{ color: item.secondary.error ? 'red' : undefined }}>{item.secondary.text}</div>}
+        {item.secondary.text && (
+          <div style={{ color: item.secondary.error ? 'red' : undefined }}>{item.secondary.text}</div>
+        )}
       </div>
-      <div className='psdk-utility-action'>
+      <div className="psdk-utility-action">
         {menuIconOverride$ && (
-          <button type='button' className='psdk-utility-button' aria-label='Delete Attachment' onClick={removeAttachment}>
-            <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$} />
+          <button
+            type="button"
+            className="psdk-utility-button"
+            aria-label="Delete Attachment"
+            onClick={removeAttachment}
+          >
+            <img className="psdk-utility-card-action-svg-icon" src={menuIconOverride$} />
           </button>
         )}
         {!menuIconOverride$ && (
           <div>
             <IconButton
-              id='setting-button'
+              id="setting-button"
               aria-controls={open ? 'file-menu' : undefined}
               aria-expanded={open ? 'true' : undefined}
-              aria-haspopup='true'
+              aria-haspopup="true"
               onClick={handleClick}
-              size='large'
+              size="large"
             >
               <MoreVertIcon />
             </IconButton>
-            <Menu id='file-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+            <Menu id="file-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
               {item.actions &&
-                item.actions.map(option => (
+                item.actions.map((option) => (
                   <MenuItem style={{ fontSize: '14px' }} key={option.id || option.text} onClick={option.onClick}>
                     {option.text}
                   </MenuItem>

package/templates/react-sdk-reference/src/components/widget/SummaryList/SummaryList.tsx

@@ -15,8 +15,13 @@ export default function SummaryList(props: SummaryListProps) {
   const { menuIconOverride$: menuOverride = '' } = props;
   return (
     <div>
-      {props.arItems$.map(file => (
-        <SummaryItem key={file.id} menuIconOverride$={menuOverride} arItems$={file} menuIconOverrideAction$={props.menuIconOverrideAction$} />
+      {props.arItems$.map((file) => (
+        <SummaryItem
+          key={file.id}
+          menuIconOverride$={menuOverride}
+          arItems$={file}
+          menuIconOverrideAction$={props.menuIconOverrideAction$}
+        />
       ))}
     </div>
   );

package/templates/react-sdk-reference/src/components/widget/ToDo/ToDo.tsx

@@ -25,13 +25,7 @@ import type { PConnProps } from '@pega/sdk-react';
 
 import './ToDo.css';
 
-const fetchMyWorkList = (
-  datapage,
-  fields,
-  numberOfRecords,
-  includeTotalCount,
-  context,
-) => {
+const fetchMyWorkList = (datapage, fields, numberOfRecords, includeTotalCount, context) => {
   return PCore.getDataPageUtils()
     .getDataAsync(
       datapage,
@@ -58,8 +52,7 @@ const fetchMyWorkList = (
         ...response,
         data: (Array.isArray(response?.data) ? response.data : []).map((row) =>
           Object.keys(fields).reduce((obj, key) => {
-            obj[key] =
-              row[PCore.getAnnotationUtils().getPropertyName(fields[key])];
+            obj[key] = row[PCore.getAnnotationUtils().getPropertyName(fields[key])];
             return obj;
           }, {}),
         ),
@@ -161,9 +154,7 @@ export default function ToDo(props: ToDoProps) {
   const localeCategory = 'Todo';
   const showlessLocalizedValue = localizedVal('show_less', 'CosmosFields');
   const showMoreLocalizedValue = localizedVal('show_more', 'CosmosFields');
-  const canPerform =
-    assignments?.[0]?.canPerform === 'true' ||
-    assignments?.[0]?.canPerform === true;
+  const canPerform = assignments?.[0]?.canPerform === 'true' || assignments?.[0]?.canPerform === true;
   const [count, setCount] = useState(0);
 
   const {
@@ -210,16 +201,8 @@ export default function ToDo(props: ToDoProps) {
 
   const getAssignmentName = (assignment) => {
     return type === CONSTS.TODO
-      ? localizedVal(
-          assignment.name,
-          '',
-          PCore.getLocaleUtils().getCaseLocaleReference(assignment.classname),
-        )
-      : localizedVal(
-          assignment.stepName,
-          '',
-          PCore.getLocaleUtils().getCaseLocaleReference(assignment.classname),
-        );
+      ? localizedVal(assignment.name, '', PCore.getLocaleUtils().getCaseLocaleReference(assignment.classname))
+      : localizedVal(assignment.stepName, '', PCore.getLocaleUtils().getCaseLocaleReference(assignment.classname));
   };
 
   function showToast(message: string) {
@@ -230,10 +213,7 @@ export default function ToDo(props: ToDoProps) {
     setShowSnackbar(true);
   }
 
-  function handleSnackbarClose(
-    event: React.SyntheticEvent<any> | Event,
-    reason?: string,
-  ) {
+  function handleSnackbarClose(event: React.SyntheticEvent<any> | Event, reason?: string) {
     if (reason === 'clickaway') {
       return;
     }
@@ -242,12 +222,7 @@ export default function ToDo(props: ToDoProps) {
 
   function _showMore() {
     setBShowMore(false);
-    if (
-      type === CONSTS.WORKLIST &&
-      count &&
-      count > assignments.length &&
-      !assignmentsSource
-    ) {
+    if (type === CONSTS.WORKLIST && count && count > assignments.length && !assignmentsSource) {
       fetchMyWorkList(
         myWorkList.datapage,
         getPConnect().getComponentConfig()?.myWorkList.fields,
@@ -310,32 +285,21 @@ export default function ToDo(props: ToDoProps) {
 
     if ((showTodoList && type !== CONSTS.TODO) || assignment.isChild === true) {
       /* Supress link for todo inside flow step */
-      return (
-        <Button
-          size='small'
-          color='primary'
-        >{`${assignment.name} ${getID(assignment)}`}</Button>
-      );
+      return <Button size="small" color="primary">{`${assignment.name} ${getID(assignment)}`}</Button>;
     }
     return displayID;
   };
 
   const getListItemComponent = (assignment) => {
-    const caseLocaleRef = PCore.getLocaleUtils().getCaseLocaleReference(
-      assignment.classname,
-    );
+    const caseLocaleRef = PCore.getLocaleUtils().getCaseLocaleReference(assignment.classname);
     if (isDesktop) {
       return (
         <>
           {localizedVal('In', localeCategory)}
           {renderTaskId(type, getPConnect, showTodoList, assignment)}
-          {type === CONSTS.WORKLIST && assignment.status
-            ? `\u2022 `
-            : undefined}
+          {type === CONSTS.WORKLIST && assignment.status ? `\u2022 ` : undefined}
           {type === CONSTS.WORKLIST && assignment.status ? (
-            <span className='psdk-todo-assignment-status'>
-              {localizedVal(assignment.status, '', caseLocaleRef)}
-            </span>
+            <span className="psdk-todo-assignment-status">{localizedVal(assignment.status, '', caseLocaleRef)}</span>
           ) : undefined}
           {` \u2022  ${localizedVal('Urgency', localeCategory)}  ${getPriority(assignment)}`}
         </>
@@ -343,52 +307,33 @@ export default function ToDo(props: ToDoProps) {
     }
     return (
       <>
-        <Button
-          size='small'
-          color='primary'
-        >{`${assignment.name} ${getID(assignment)}`}</Button>
+        <Button size="small" color="primary">{`${assignment.name} ${getID(assignment)}`}</Button>
         {` \u2022 ${localizedVal('Urgency', localeCategory)}  ${getPriority(assignment)}`}
       </>
     );
   };
 
-  const getCount = () =>
-    assignmentsSource
-      ? assignmentsSource.length
-      : type === CONSTS.WORKLIST
-        ? count
-        : 0;
+  const getCount = () => (assignmentsSource ? assignmentsSource.length : type === CONSTS.WORKLIST ? count : 0);
 
   const toDoContent = (
     <>
       {showTodoList && (
         <CardHeader
           title={
-            <Badge
-              badgeContent={getCount()}
-              overlap='rectangular'
-              color='primary'
-            >
-              <Typography variant='h6'>
-                {headerText}&nbsp;&nbsp;&nbsp;
-              </Typography>
+            <Badge badgeContent={getCount()} overlap="rectangular" color="primary">
+              <Typography variant="h6">{headerText}&nbsp;&nbsp;&nbsp;</Typography>
             </Badge>
           }
         />
       )}
       <List>
         {assignments.map((assignment) => (
-          <div
-            className='psdk-todo-avatar-header'
-            key={getAssignmentId(assignment)}
-          >
+          <div className="psdk-todo-avatar-header" key={getAssignmentId(assignment)}>
             <Avatar className={classes.avatar} style={{ marginRight: '16px' }}>
               {currentUserInitials}
             </Avatar>
             <div style={{ display: 'block' }}>
-              <Typography variant='h6'>
-                {localizedVal(assignment?.name, localeCategory)}
-              </Typography>
+              <Typography variant="h6">{localizedVal(assignment?.name, localeCategory)}</Typography>
               {`${localizedVal('In', localeCategory)} ${getID(assignment)} \u2022  ${localizedVal(
                 'Urgency',
                 localeCategory,
@@ -396,11 +341,7 @@ export default function ToDo(props: ToDoProps) {
             </div>
             {(!isConfirm || canPerform) && (
               <div style={{ marginLeft: 'auto' }}>
-                <IconButton
-                  id='go-btn'
-                  onClick={() => clickGo(assignment)}
-                  size='large'
-                >
+                <IconButton id="go-btn" onClick={() => clickGo(assignment)} size="large">
                   <ArrowForwardIosOutlinedIcon />
                 </IconButton>
               </div>
@@ -418,21 +359,11 @@ export default function ToDo(props: ToDoProps) {
           {showTodoList && (
             <CardHeader
               title={
-                <Badge
-                  badgeContent={getCount()}
-                  overlap='rectangular'
-                  color='primary'
-                >
-                  <Typography variant='h6'>
-                    {headerText}&nbsp;&nbsp;&nbsp;
-                  </Typography>
+                <Badge badgeContent={getCount()} overlap="rectangular" color="primary">
+                  <Typography variant="h6">{headerText}&nbsp;&nbsp;&nbsp;</Typography>
                 </Badge>
               }
-              avatar={
-                <Avatar className={classes.avatar}>
-                  {currentUserInitials}
-                </Avatar>
-              }
+              avatar={<Avatar className={classes.avatar}>{currentUserInitials}</Avatar>}
             />
           )}
           <CardContent>
@@ -444,18 +375,12 @@ export default function ToDo(props: ToDoProps) {
                   divider
                   onClick={() => clickGo(assignment)}
                   secondaryAction={
-                    <IconButton
-                      onClick={() => clickGo(assignment)}
-                      size='large'
-                    >
+                    <IconButton onClick={() => clickGo(assignment)} size="large">
                       <ArrowForwardIosOutlinedIcon />
                     </IconButton>
                   }
                 >
-                  <ListItemText
-                    primary={getAssignmentName(assignment)}
-                    secondary={getListItemComponent(assignment)}
-                  />
+                  <ListItemText primary={getAssignmentName(assignment)} secondary={getListItemComponent(assignment)} />
                 </ListItem>
               ))}
             </List>
@@ -463,24 +388,18 @@ export default function ToDo(props: ToDoProps) {
         </Card>
       )}
 
-      {type === CONSTS.TODO && !isConfirm && (
-        <Card className={classes.todoWrapper}>{toDoContent}</Card>
-      )}
+      {type === CONSTS.TODO && !isConfirm && <Card className={classes.todoWrapper}>{toDoContent}</Card>}
       {type === CONSTS.TODO && isConfirm && <>{toDoContent}</>}
 
       {getCount() > 3 && (
-        <Box display='flex' justifyContent='center'>
+        <Box display="flex" justifyContent="center">
           {bShowMore ? (
-            <Button color='primary' onClick={_showMore}>
-              {showMoreLocalizedValue === 'show_more'
-                ? 'Show more'
-                : showMoreLocalizedValue}
+            <Button color="primary" onClick={_showMore}>
+              {showMoreLocalizedValue === 'show_more' ? 'Show more' : showMoreLocalizedValue}
             </Button>
           ) : (
             <Button onClick={_showLess}>
-              {showlessLocalizedValue === 'show_less'
-                ? 'Show less'
-                : showlessLocalizedValue}
+              {showlessLocalizedValue === 'show_less' ? 'Show less' : showlessLocalizedValue}
             </Button>
           )}
         </Box>
@@ -492,13 +411,8 @@ export default function ToDo(props: ToDoProps) {
         onClose={handleSnackbarClose}
         message={snackbarMessage}
         action={
-          <IconButton
-            size='small'
-            aria-label='close'
-            color='inherit'
-            onClick={handleSnackbarClose}
-          >
-            <CloseIcon fontSize='small' />
+          <IconButton size="small" aria-label="close" color="inherit" onClick={handleSnackbarClose}>
+            <CloseIcon fontSize="small" />
           </IconButton>
         }
       />

package/templates/react-sdk-reference/src/main.tsx

@@ -1,6 +1,6 @@
-import '@pega/sdk-react/dist/index.css';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
+import '@pega/sdk-react/dist/index.css';
 import { AppSelector } from './AppSelector';
 
 const outlet = document.getElementById('outlet');

package/templates/react-sdk-reference/tsconfig.json

@@ -18,7 +18,8 @@
     "noEmit": true,
     "typeRoots": ["../../node_modules/@types", "../../node_modules/@pega"],
     "types": ["pcore-pconnect-typedefs"],
-    "noImplicitAny": false
+    "noImplicitAny": false,
+    "ignoreDeprecations": "6.0"
   },
   "include": ["src", "vite.config.ts"]
 }

package/templates/react-sdk-reference/vite.config.ts

@@ -3,41 +3,66 @@ import react from '@vitejs/plugin-react';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 import { createRequire } from 'module';
 import path from 'path';
+import fs from 'node:fs';
 
 const require = createRequire(import.meta.url);
 
 // Resolve paths from hoisted node_modules (npm workspaces hoist to monorepo root)
-const constellationDist = path.join(
-  path.dirname(require.resolve('@pega/constellationjs/package.json')),
-  'dist',
-);
-const authLibDir = path.join(
-  path.dirname(require.resolve('@pega/auth/package.json')),
-  'lib',
-  'oauth-client',
-);
+const constellationDist = path.join(path.dirname(require.resolve('@pega/constellationjs/package.json')), 'dist');
+const authLibDir = path.join(path.dirname(require.resolve('@pega/auth/package.json')), 'lib', 'oauth-client');
 
 export default defineConfig({
   plugins: [
     react(),
+    // vite-plugin-static-copy maps files to wrong URLs when packages are hoisted to the
+    // monorepo root (../../node_modules/…). This middleware fixes dev-mode serving by
+    // intercepting the expected URLs and streaming from the resolved hoisted paths.
+    {
+      name: 'serve-hoisted-statics',
+      apply: 'serve' as const,
+      configureServer(server) {
+        server.middlewares.use((req, res, next) => {
+          const urlPath = (req.url ?? '').split('?')[0];
+          let srcFile: string | undefined;
+
+          // /constellation/<file>            → constellationDist/<file>
+          const constRoot = urlPath.match(/^\/constellation\/([^/]+)$/);
+          if (constRoot) srcFile = path.join(constellationDist, constRoot[1]);
+
+          // /constellation/prerequisite/<path> → constellationDist/<path>
+          const constPre = urlPath.match(/^\/constellation\/prerequisite\/(.+)$/);
+          if (constPre) srcFile = path.join(constellationDist, constPre[1]);
+
+          // index.html inline <script src="node_modules/@pega/constellationjs/dist/…">
+          const nodeConst = urlPath.match(/^\/node_modules\/@pega\/constellationjs\/dist\/(.+)$/);
+          if (nodeConst) srcFile = path.join(constellationDist, nodeConst[1]);
+
+          // Auth callback files
+          if (urlPath === '/auth.html') srcFile = path.join(authLibDir, 'authDone.html');
+          if (urlPath === '/authDone.js') srcFile = path.join(authLibDir, 'authDone.js');
+
+          if (srcFile && fs.existsSync(srcFile)) {
+            const ext = path.extname(srcFile).toLowerCase();
+            res.setHeader(
+              'Content-Type',
+              ext === '.js'
+                ? 'application/javascript'
+                : ext === '.json'
+                  ? 'application/json'
+                  : ext === '.html'
+                    ? 'text/html'
+                    : 'application/octet-stream',
+            );
+            res.setHeader('Cache-Control', 'no-cache');
+            fs.createReadStream(srcFile).pipe(res as any);
+            return;
+          }
+          next();
+        });
+      },
+    },
     viteStaticCopy({
       targets: [
-        {
-          src: path.join(constellationDist, 'bootstrap-shell.js'),
-          dest: 'constellation',
-        },
-        {
-          src: path.join(constellationDist, 'lib_asset.json'),
-          dest: 'constellation',
-        },
-        {
-          src: path.join(constellationDist, 'constellation-core.*'),
-          dest: 'constellation/prerequisite',
-        },
-        {
-          src: path.join(constellationDist, 'js'),
-          dest: 'constellation/prerequisite',
-        },
         {
           src: path.join(authLibDir, 'authDone.html'),
           dest: '.',
@@ -52,7 +77,7 @@ export default defineConfig({
           dest: '.',
         },
         {
-          src: 'assets/*',
+          src: 'assets/**/*',
           dest: './constellation',
         },
       ],

package/templates/wc-sdk-reference/package.json

@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "@pega/sdk-wc": "^0.1.0",
-    "lit": "^3.2.0"
+    "lit": "^3.3.3"
   },
   "devDependencies": {
-    "typescript": "~5.8.2",
-    "vite": "^6.3.5"
+    "typescript": "~6.0.3",
+    "vite": "^8.1.4"
   }
 }

package/templates/wc-sdk-reference/src/index.ts

@@ -76,13 +76,15 @@ export class PegaApp extends LitElement {
       </div>
       <div class="content">
         <div class="card">
-          ${this.isReady
-            ? html`<p>SDK Ready. Implement your Pega components here.</p>`
-            : html`
-                <h2>Ready to connect</h2>
-                <p>Configure sdk-config.json and initialize the Pega SDK.</p>
-                <button @click=${this._handleInit}>Initialize SDK</button>
-              `}
+          ${
+            this.isReady
+              ? html`<p>SDK Ready. Implement your Pega components here.</p>`
+              : html`
+                  <h2>Ready to connect</h2>
+                  <p>Configure sdk-config.json and initialize the Pega SDK.</p>
+                  <button @click=${this._handleInit}>Initialize SDK</button>
+                `
+          }
         </div>
       </div>
     `;
@@ -90,9 +92,7 @@ export class PegaApp extends LitElement {
 
   private _handleInit() {
     // TODO: Initialize @pega/sdk-wc bridge and auth
-    console.log(
-      'Initialize Pega SDK — configure sdk-config.json with your server details',
-    );
+    console.log('Initialize Pega SDK — configure sdk-config.json with your server details');
     this.isReady = true;
   }
 }

package/templates/wc-sdk-reference/tsconfig.json

@@ -12,6 +12,7 @@
     "noEmit": true,
     "experimentalDecorators": true,
     "useDefineForClassFields": false,
+    "ignoreDeprecations": "6.0",
     "paths": {
       "@pega/sdk-wc": ["../../packages/sdk-wc/src/index.ts"],
       "@pega/sdk-types": ["../../packages/sdk-types/src/index.ts"]

package/templates/react-sdk-reference/.claude/instructions/component-map.md

@@ -1,38 +0,0 @@
-<!-- Applies to: **/component-map.ts -->
-
-# Component Map Rules
-
-The component map (`src/components/component-map.ts`) is the registry that maps Pega component names to React implementations.
-
-## Structure
-
-```typescript
-import { sdkComponents } from '@pega/sdk-react';
-
-function getSampleComponentMap() {
-  return {
-    ...sdkComponents,   // NEVER remove this — provides infrastructure
-    // Your components below:
-    TextInput,
-    Dropdown,
-    // ...
-  };
-}
-```
-
-## Rules
-
-1. **NEVER remove `...sdkComponents`** — it provides View, Region, Reference, RootContainer, FlowContainer, ViewContainer, Assignment, AssignmentCard, ErrorBoundary, MultiStep, CaseSummary, and their aliases.
-
-2. **Map keys must match Pega component names exactly** — these are resolved at runtime by the platform. The key is what Pega sends; the value is your React component.
-
-3. **To replace a component**: change its import path to your new implementation. Do NOT rename the key.
-
-4. **To add a new component**: add the import + add a new key-value entry.
-
-5. **Key naming exceptions** (where key differs from variable name):
-   - `Date: DateField` (Date is reserved in JS)
-   - `URL: URLComponent` (URL is a global)
-   - `Todo: ToDo` (casing difference)
-
-6. **Keep the `registerSampleComponents` function** — it registers all entries into the `ComponentRegistry` instance used by the PConnect bridge.

package/templates/react-sdk-reference/.claude/instructions/dse-component.md

@@ -1,75 +0,0 @@
-<!-- Applies to: src/components/designSystemExtension/**/*.tsx -->
-
-# Design System Extension Component Rules
-
-When creating or modifying DSE components, follow these rules:
-
-## What Are DSE Components?
-
-Design System Extension components are display-focused presentational components. They sit between pure UI and data-fetching widgets. Some receive `getPConnect`, others receive only display props.
-
-## Patterns
-
-### Pattern A: With PConnect (data-aware display)
-
-Used for: FieldValueList, CaseSummaryFields, DetailsFields
-
-```typescript
-import type { PConnProps } from '@pega/sdk-react';
-
-interface FieldValueListProps extends PConnProps {
-  name?: string;
-  value?: string;
-  variant?: 'stacked' | 'inline';
-}
-
-export default function FieldValueList(props: FieldValueListProps) {
-  const { name, value, variant = 'inline' } = props;
-  // Render a label-value pair
-}
-```
-
-### Pattern B: Without PConnect (pure presentation)
-
-Used for: AlertBanner, Banner, Operator
-
-```typescript
-interface AlertBannerProps {
-  variant: 'urgent' | 'warning' | 'info' | 'success';
-  heading?: string;
-  messages: Array<string | { label?: string; description?: string }>;
-  onClose?: () => void;
-}
-
-export default function AlertBanner(props: AlertBannerProps) {
-  // Render an alert/notification banner
-}
-```
-
-### Pattern C: Rich editor (extends PConnFieldProps)
-
-Used for: RichTextEditor
-
-```typescript
-import type { PConnFieldProps } from '@pega/sdk-react';
-
-interface RichTextEditorProps extends PConnFieldProps {
-  content?: string;
-}
-```
-
-## Visual Preservation
-
-The replacement must look the same as the original component:
-
-1. **Read any `.css` file in the directory first.** Note every class's visual intent (spacing, sizing, colors, layout).
-2. Replicate those styles via inline `style` props, the new design system's props/variants, or by keeping the CSS import — whichever produces the closest match.
-3. Do NOT silently drop `makeStyles` classes — map each one to an equivalent style.
-
-## Key Rules
-
-- DSE components are the **most commonly referenced by other components** via `getComponentFromRegistry('FieldValueList')` — every field uses FieldValueList for display modes
-- Keep the same export name (default export) and prop interface shape
-- If you replace FieldValueList, ensure it accepts `name`, `value`, and optional `variant` props
-- AlertBanner must handle the `messages` array format (both strings and `{label, description}` objects)
-- Do NOT drop visual styles when removing `makeStyles` — always map them to an equivalent