@pega/sdk 0.0.14 → 0.0.15

package/templates/react-sdk-reference/src/components/template/SimpleTable/SimpleTableSelect/SimpleTableSelect.tsx

@@ -1,6 +1,8 @@
+import { useLayoutEffect } from 'react';
 import { getComponentFromRegistry } from '@pega/sdk-react';
 
 import type { PConnProps } from '@pega/sdk-react';
+import { getFieldMeta } from '../../DataReference/utils';
 
 interface SimpleTableSelectProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -13,110 +15,97 @@ interface SimpleTableSelectProps extends PConnProps {
   parameters: any;
   readonlyContextList: object[] | string;
   dataRelationshipContext: string;
+  defaultRowHeight: string | number;
+  showPromotedFilters: boolean;
+  displayAs: string;
+  contextPage: object;
+  toggleFieldVisibility: boolean;
 }
 
-const isSelfReferencedProperty = (param, referenceProp) => {
-  const [, parentPropName] = param.split('.');
-  return parentPropName === referenceProp;
-};
-
-/**
- * SimpleTable react component
- * @param {*} props - props
- */
-export default function SimpleTableSelect(props: SimpleTableSelectProps) {
+function SelectableTable(props: SimpleTableSelectProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const ListView = getComponentFromRegistry('ListView');
-  const SimpleTable = getComponentFromRegistry('SimpleTable');
   const PromotedFilters = getComponentFromRegistry('PromotedFilters');
 
   const {
     label,
     getPConnect,
-    renderMode = '',
     showLabel = true,
     viewName = '',
     parameters,
     dataRelationshipContext = null,
+    referenceList,
+    showPromotedFilters,
+    displayAs,
+    readonlyContextList,
+    contextPage,
+    toggleFieldVisibility,
   } = props;
 
+  const pConn = getPConnect();
+
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
   if (propsToUse.showLabel === false) {
     propsToUse.label = '';
   }
 
-  const pConn = getPConnect();
+  const { compositeKeys, fieldMetadata } = getFieldMeta(getPConnect, dataRelationshipContext);
+  const { pageClass } = fieldMetadata;
+
   const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
   const { selectionMode, selectionList } = pConn.getConfigProps() as any;
   const isMultiSelectMode = selectionMode === MULTI;
 
-  if (isMultiSelectMode && renderMode === 'ReadOnly') {
-    return <SimpleTable {...props} showLabel={propsToUse.showLabel} />;
-  }
-
-  const pageReference = pConn.getPageReference();
-  let referenceProp = isMultiSelectMode
-    ? selectionList.substring(1)
-    : pageReference.substring(pageReference.lastIndexOf('.') + 1);
-  // Replace here to use the context name instead
-  let contextPageReference: string | null = null;
-  if (props.dataRelationshipContext !== null && selectionMode === 'single') {
-    referenceProp = dataRelationshipContext;
-    contextPageReference = pageReference.concat('.').concat(referenceProp);
-  }
-
-  // Need to get this written so typedefs work
-  const { datasource: { parameters: fieldParameters = {} } = {}, pageClass } = isMultiSelectMode
-    ? pConn.getFieldMetadata(`@P .${referenceProp}`)
-    : pConn.getCurrentPageFieldMetadata(contextPageReference);
-
-  const compositeKeys: any[] = [];
-  Object.values(fieldParameters).forEach((param: any) => {
-    if (isSelfReferencedProperty(param, referenceProp)) {
-      compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
+  useLayoutEffect(() => {
+    if (isMultiSelectMode) {
+      // register selectionList in c11nEnv stateProps for client side validation
+      (pConn as any).setStateProps({ selectionList });
+      (pConn.getListActions() as any).initDefaultPageInstructions(selectionList, compositeKeys);
     }
-  });
-
-  // setting default row height for select table
-  const defaultRowHeight = '2';
-
-  const additionalTableConfig = {
-    rowDensity: false,
-    enableFreezeColumns: false,
-    autoSizeColumns: false,
-    resetColumnWidths: false,
+  }, []);
+
+  const isFullTable = displayAs === 'table' || displayAs === 'advancedSearch';
+  const additionalTableConfig: any = {
+    rowDensity: isFullTable,
+    enableFreezeColumns: isFullTable,
+    autoSizeColumns: isFullTable,
+    resetColumnWidths: isFullTable,
     defaultFieldDef: {
-      showMenu: false,
-      noContextMenu: true,
-      grouping: false,
+      aggregation: false,
     },
     itemKey: '$key',
-    defaultRowHeight,
   };
 
+  const searchFields = (pConn as any).getRawConfigProps?.()?.searchFields ?? [];
+  let selectedValues: any = isMultiSelectMode ? readonlyContextList : contextPage;
+
+  if (displayAs === 'advancedSearch') {
+    selectedValues = null;
+  }
+
   const listViewProps = {
     ...props,
     title: propsToUse.label,
     personalization: false,
     grouping: false,
     expandGroups: false,
-    reorderFields: false,
     showHeaderIcons: false,
     editing: false,
     globalSearch: true,
-    toggleFieldVisibility: false,
+    toggleFieldVisibility: isFullTable && toggleFieldVisibility,
     basicMode: true,
     additionalTableConfig,
     compositeKeys,
     viewName,
     parameters,
+    searchFields,
+    selectedValues,
+    isAdvancedSearchAndSelect: displayAs === 'advancedSearch',
   };
 
   const filters = (getPConnect().getRawMetadata() as any).config.promotedFilters ?? [];
 
-  const isSearchable = filters.length > 0;
-
-  if (isSearchable) {
+  if (showPromotedFilters && filters.length > 0) {
     return (
       <PromotedFilters
         getPConnect={getPConnect}
@@ -125,8 +114,26 @@ export default function SimpleTableSelect(props: SimpleTableSelectProps) {
         listViewProps={listViewProps}
         pageClass={pageClass}
         parameters={parameters}
+        referenceList={referenceList}
       />
     );
   }
   return <ListView {...listViewProps} />;
 }
+
+export default function SimpleTableSelect(props: SimpleTableSelectProps) {
+  const SimpleTableManual = getComponentFromRegistry('SimpleTableManual');
+
+  const { getPConnect, renderMode = '' } = props;
+
+  const pConn = getPConnect();
+  const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+  const { selectionMode } = pConn.getConfigProps() as any;
+  const isMultiSelectMode = selectionMode === MULTI;
+
+  if (isMultiSelectMode && renderMode === 'ReadOnly') {
+    return <SimpleTableManual {...props} />;
+  }
+
+  return <SelectableTable {...props} />;
+}

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

@@ -392,7 +392,7 @@ export default function ToDo(props: ToDoProps) {
       {type === CONSTS.TODO && isConfirm && <>{toDoContent}</>}
 
       {getCount() > 3 && (
-        <Box display="flex" justifyContent="center">
+        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
           {bShowMore ? (
             <Button color="primary" onClick={_showMore}>
               {showMoreLocalizedValue === 'show_more' ? 'Show more' : showMoreLocalizedValue}

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

@@ -25,9 +25,12 @@ export default defineConfig({
           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/<path>           → constellationDist/<path> (bootstrap-shell.js, core, lazy chunks)
+          const constAny = urlPath.match(/^\/constellation\/(.+)$/);
+          if (constAny) {
+            const resolved = path.join(constellationDist, constAny[1]);
+            if (resolved.startsWith(constellationDist + path.sep)) srcFile = resolved;
+          }
 
           // /constellation/prerequisite/<path> → constellationDist/<path>
           const constPre = urlPath.match(/^\/constellation\/prerequisite\/(.+)$/);
@@ -66,19 +69,38 @@ export default defineConfig({
         {
           src: path.join(authLibDir, 'authDone.html'),
           dest: '.',
-          rename: 'auth.html',
+          rename: { stripBase: true, name: 'auth.html' },
         },
         {
           src: path.join(authLibDir, 'authDone.js'),
           dest: '.',
+          rename: { stripBase: true },
         },
         {
           src: 'sdk-config.json',
           dest: '.',
         },
+        // bootstrap-shell.js requests the core bundle and its lazy chunks from /constellation/prerequisite/
+        {
+          src: [path.join(constellationDist, 'bootstrap-shell.js'), path.join(constellationDist, 'lib_asset.json')],
+          dest: './constellation',
+          rename: { stripBase: true },
+        },
+        {
+          src: path.join(constellationDist, 'constellation-core.*.js'),
+          dest: './constellation/prerequisite',
+          rename: { stripBase: true },
+        },
+        {
+          // Keeps the js/ folder: strips node_modules/@pega/constellationjs/dist
+          src: path.join(constellationDist, 'js'),
+          dest: './constellation/prerequisite',
+          rename: { stripBase: 4 },
+        },
         {
           src: 'assets/**/*',
           dest: './constellation',
+          rename: { stripBase: 1 },
         },
       ],
     }),

package/templates/angular-sdk-reference/src/helpers/event-utils.ts

@@ -1,18 +0,0 @@
-// From DX Components src/utils/event-utils.js
-
-export function handleEvent(actions: any, eventType: string, propName: string, value: string | boolean | number) {
-  switch (eventType) {
-    case 'change':
-      actions.updateFieldValue(propName, value);
-      break;
-    case 'blur':
-      actions.triggerFieldChange(propName, value);
-      break;
-    case 'changeNblur':
-      actions.updateFieldValue(propName, value);
-      actions.triggerFieldChange(propName, value);
-      break;
-    default:
-      break;
-  }
-}

package/templates/angular-sdk-reference/src/helpers/utils.ts

@@ -1,38 +0,0 @@
-export function getOptionList(configProps: any, dataObject: any): any[] {
-  const listType = configProps.listType;
-  let arReturn: any[] = [];
-
-  if (listType) {
-    switch (listType.toLowerCase()) {
-      case 'associated':
-        // data source should be an array
-        if (typeof configProps.datasource === 'object') {
-          arReturn = configProps.datasource;
-        }
-        break;
-
-      case 'datapage':
-        // get data page
-        // eslint-disable-next-line no-case-declarations
-        const dataPage = configProps.datasource;
-        if (typeof dataPage === 'string' && dataObject[dataPage]) {
-          alert('need to handle data page');
-        } else {
-          let listSourceItems = configProps.listOutput;
-          if (typeof dataPage === 'object' && !Array.isArray(listSourceItems)) {
-            listSourceItems = dataPage.source ? dataPage.source : [];
-          }
-          (listSourceItems || []).forEach((item: any) => {
-            item.value = item.text ? item.text : item.value;
-          });
-          arReturn = listSourceItems || [];
-        }
-        break;
-
-      default:
-        break;
-    }
-  }
-
-  return arReturn;
-}

package/templates/angular-sdk-reference/src/helpers/versionHelpers.ts

@@ -1,14 +0,0 @@
-/**
- * versionHelpers.ts
- *
- * Container helper functions that can identify which version of
- * PCore/PConnect is being run
- */
-
-export const sdkVersion = '8.7';
-
-export function compareSdkPCoreVersions() {
-  // const theConstellationVersion = PCore.getPCoreVersion();
-
-  console.warn(`Using Constellation version ${PCore.getPCoreVersion()}. Ensure this is the same version as your Infinity server.`);
-}

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

@@ -1,47 +0,0 @@
----
-ai-globs: **/{AlertBanner,Banner,CaseSummaryFields,DetailsFields,FieldGroup,FieldGroupList,FieldValueList,Operator,Pulse,RichTextEditor,WssQuickCreate}/**/*
----
-
-# 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 a PConnect accessor, others receive only display props.
-
-## Patterns
-
-### Pattern A: With PConnect (data-aware display)
-
-Used for: FieldValueList, CaseSummaryFields, DetailsFields
-
-These components extend the base PConnect props interface and receive a PConnect accessor. FieldValueList additionally accepts `name`, `value`, and an optional `variant` (`'stacked'` | `'inline'`) prop that controls its layout — it renders a label-value pair.
-
-### Pattern B: Without PConnect (pure presentation)
-
-Used for: AlertBanner, Banner, Operator
-
-These components receive only plain display props — no PConnect awareness. AlertBanner accepts a `variant` (`'urgent'` | `'warning'` | `'info'` | `'success'`), an optional `heading`, a `messages` array (strings or `{ label, description }` objects), and an optional `onClose` callback.
-
-### Pattern C: Rich editor (extends field props)
-
-Used for: RichTextEditor
-
-This component extends the base field props interface (the same interface used by field components) and adds a `content` prop.
-
-## 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 legacy styling utility classes — map each one to an equivalent style.
-
-## Key Rules
-
-- DSE components are the **most commonly referenced by other components** via the project's component registry — every field uses FieldValueList for display modes
-- Keep the same export convention and prop interface shape used elsewhere in the project
-- 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 legacy styling utility classes — always map them to an equivalent

package/templates/react-sdk-reference/.ai-common/instructions/field-component.md

@@ -1,50 +0,0 @@
----
-ai-globs: **/{AutoComplete,CancelAlert,Checkbox,Currency,Date,DateTime,Decimal,Dropdown,Email,Group,Integer,Location,Multiselect,ObjectReference,Percentage,Phone,RadioButtons,RichText,ScalarList,SelectableCard,SemanticLink,TextArea,TextContent,TextInput,Time,URL,UserReference}/**/*
----
-
-# Field Component Rules
-
-When creating or modifying field components, follow these rules:
-
-## Required Structure
-
-1. **Extend the base field props interface** — the project's standard field props type — when defining the component's prop interface.
-
-2. **Export the component** using the project's standard export convention (matching other field components in the project).
-
-## Required Behaviors
-
-1. **Extract standard props**: `getPConnect`, `label`, `required`, `disabled`, `value`, `validatemessage`, `status`, `readOnly`, `testId`, `helperText`, `displayMode`, `hideLabel`, `placeholder`
-
-2. **Get PConnect APIs**: obtain the actions API and the current property name from the PConnect accessor (`getPConnect()` → actions API, state props).
-
-3. **Handle displayMode** (MUST be before the main return):
-   - When `displayMode` is `DISPLAY_ONLY`, render the value via the project's field-value display component (unlabeled if `hideLabel` is set).
-   - When `displayMode` is `STACKED_LARGE_VAL`, render the same display component with a `stacked` variant.
-
-4. **Use local state + blur pattern**:
-   - `onChange` → update local state only
-   - `onBlur` → call the event helper with a `changeNblur` action, the property name, and the local value
-
-5. **Show validation**: Display `validatemessage` and apply error styling when `status === 'error'`
-
-6. **Pass test ID**: Set the test id attribute on the interactive element using the `testId` prop
-
-7. **Use the component registry to look up the field-value display component** — never hardcode its import
-
-## 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 design system's component props/variants, or by keeping the CSS import — whichever produces the closest match.
-3. Do NOT silently drop legacy styling utility classes — map each one to an equivalent style.
-
-## Do NOT
-
-- Skip `displayMode` handling — it breaks read-only views
-- Call the blur handler on every keystroke — only on blur
-- Hardcode component imports for components that exist in the registry
-- Remove the import of the event handling helper module
-- Drop visual styles when removing legacy styling utility classes — always map them to an equivalent
-- **Import the same symbol twice from the shared field utilities module** — if you import a type or helper in one import statement, do NOT add a separate import line for the same symbol elsewhere. This causes "already defined" errors. Use a single consolidated import.

package/templates/react-sdk-reference/.ai-common/instructions/infra-component.md

@@ -1,76 +0,0 @@
----
-ai-globs: **/{ActionButtons,DashboardFilter,DeferLoad,MultiStep,NavBar,Stages,VerticalTabs}/**/*
----
-
-# Infrastructure (Chrome) Component Rules
-
-When creating or modifying infrastructure components, follow these rules:
-
-## What Are Infrastructure Components?
-
-Infrastructure components are the chrome the Pega runtime draws _around_ a case or an assignment — the action button row, the stage progress indicator, the step navigation — rather than the fields inside it. They differ from every other category in one important way: **they already exist**. Generating one produces an override of the SDK's implementation.
-
-## What May Be Generated
-
-| Component     | Role                                                 | Generate? |
-| ------------- | ---------------------------------------------------- | --------- |
-| ActionButtons | The Cancel / Save / Submit row beneath an assignment | Yes       |
-| Stages        | The case stage progress indicator                    | Yes       |
-| MultiStep     | Step navigation within a multi-step assignment       | Yes       |
-
-⛔ `NavBar`, `DeferLoad`, `VerticalTabs`, and `DashboardFilter` are structural plumbing tied to the SDK's own internals. They are always sourced from the SDK adapter package and are **never** generated. If a request names one, skip it and say why. This list never grows.
-
-## Patterns
-
-### Display-only chrome (no PConnect accessor)
-
-Used for: ActionButtons
-
-Receives everything it needs as plain display props and reports interaction through a supplied callback. It holds no local state and reads nothing from the store. This is the one exception to the rule that every Pega component receives the PConnect accessor — do not add one to it.
-
-### Case-aware chrome (PConnect accessor, read-only)
-
-Used for: Stages
-
-Receives the accessor so it can read case state and localize, but never writes. Normalize the runtime's raw input through the SDK utility the component's skill file documents, read case-level state using the runtime's constants rather than literal property names, and derive a display model before rendering.
-
-### Container chrome (renders children)
-
-Used for: MultiStep
-
-Wraps the form content the runtime hands it and arranges other Pega components around it. Resolve every Pega sub-component through the project's component registry, derive which part of the structure is active from the runtime's state flags (applying the documented fallback when nothing is marked active), and forward the accessor, item key, button definitions, and press callback to the resolved sub-component unchanged.
-
-## The Contract Is Fixed
-
-Inputs, callback signatures, derivation logic, and localization come from the SDK component being replaced. **Only markup and styling are yours to change.**
-
-- Do not rename inputs or reshape callback signatures.
-- Treat every array input as optional and default it to empty.
-- Keep repeated elements stable — every item in a rendered collection needs a stable identity.
-
-## Localization
-
-Every label an infrastructure component renders comes from Pega, not from the component. Button and action labels resolve through the Pega locale utilities using the locale category the SDK component uses; case and stage names resolve through the localization service on the PConnect accessor. The value arriving in the input is a key, not display text — rendering it directly looks correct in an English environment and breaks in every other one.
-
-## 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 the new design system's props/variants, inline styles, or by keeping the CSS import — whichever produces the closest match.
-3. Do NOT silently drop legacy styling utility classes — map each one to an equivalent style.
-
-## Registration
-
-⛔ **Ordering is load-bearing for this category.** An infra entry is an override of a component the SDK already contributes, so it must be listed **after** the SDK's built-in component spread. Listed before it, the spread replaces it and the override silently does nothing.
-
-Never remove the spread — it supplies the infrastructure components that are not overridable, and removing it breaks rendering entirely.
-
-## Key Rules
-
-- Only `ActionButtons`, `Stages`, and `MultiStep` may be generated
-- The three do not share an input shape — take each one's inputs from its own skill file
-- Chrome is display-only — these components report interaction through the callback they were given and never write to the store
-- Resolve sub-components from the registry, never by direct import, or customer overrides are discarded
-- Derive the display model from the runtime's raw inputs first, then render it — this is what keeps the component portable across design systems
-- Case chrome is not assignment chrome — `Stages` belongs to the case view and never appears inside an embedded assignment; `ActionButtons` and `MultiStep` do

package/templates/react-sdk-reference/.ai-common/instructions/template-component.md

@@ -1,43 +0,0 @@
----
-ai-globs: **/{AdvancedSearch,AppShell,BannerPage,CaseSummary,CaseView,CaseViewActionsMenu,Confirmation,DataReference,DefaultForm,DefaultPage,Details,FieldGroupTemplate,HierarchicalForm,InlineDashboard,InlineDashboardPage,ListPage,ListView,MultiReferenceReadOnly,NarrowWide,ObjectPage,OneColumn,PromotedFilters,SelfServiceCaseView,SimpleTable,SingleReferenceReadOnly,SubTabs,TwoColumn,WideNarrow,WssNavBar,SearchForm,SearchGroups}/**/*
----
-
-# Template Component Rules
-
-When creating or modifying template/layout components, follow these rules:
-
-## Required Structure
-
-1. **Extend the base template props interface** — the project's standard props type — when defining the component's prop interface.
-
-2. **Export the component** using the project's standard export convention.
-
-## Template Categories
-
-### Layout Templates (TwoColumn, OneColumn, NarrowWide, WideNarrow)
-
-Receive child components directly via the props. Parse the `templateCol` prop (e.g. `"1fr 1fr"`, `"2fr 1fr"`) to compute column ratios, then render each child in its corresponding column.
-
-### Form/View Templates (DefaultForm, Details, CaseView)
-
-Render children by retrieving them from the PConnect accessor (`getPConnect().getChildren()`) and rendering each child through the project's PConnect-bridge component.
-
-### Page Templates (OneColumnPage, TwoColumnPage)
-
-Wrap a layout with page-level chrome (title, actions) — retrieve case/page metadata from the PConnect accessor and render it alongside the layout's children.
-
-## 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 layout props, or by keeping the CSS import — whichever produces the closest match.
-3. Do NOT silently drop legacy layout utility classes — map each one to an equivalent style.
-
-## Key Rules
-
-- Use the project's PConnect-bridge component to render PConnect children
-- Grid proportions come from the `templateCol` prop — parse it to calculate column ratios
-- Templates must not call the event handling helper or interact with field state
-- Templates are layout-only — they arrange, not edit
-- Do NOT drop column gap, padding, or alignment styles when removing legacy layout primitives — replicate them in the replacement layout

package/templates/react-sdk-reference/.ai-common/instructions/widget-component.md

@@ -1,45 +0,0 @@
----
-ai-globs: **/{AppAnnouncement,Attachment,CaseHistory,FileUtility,Followers,QuickCreate,SummaryItem,SummaryList,ToDo,ActionButtonsForFileUtil}/**/*
----
-
-# Widget Component Rules
-
-When creating or modifying widget components, follow these rules:
-
-## Required Structure
-
-1. **Extend the base widget props interface** — the project's standard props type, or the field props type if the widget behaves like a field (e.g. Attachment) — when defining the component's prop interface.
-
-2. **Export the component** using the project's standard export convention.
-
-## Widget Patterns
-
-### Data-Fetching Widget (ToDo, CaseHistory, Followers)
-
-Fetches data from the platform's data pages on mount. Obtain the current context from the PConnect accessor, request the datasource via the platform's data page utility, and store the result in local state. Render the fetched data inside the widget's card/list presentation.
-
-### Action Widget (ToDo)
-
-Triggers case actions. Retrieve the list of assignments using the platform's assignment helper (passing the PConnect accessor). Each assignment provides an `onClick` callback, urgency, name, and other display metadata.
-
-### File Widget (Attachment, FileUtility)
-
-Handles file upload/download via the platform's attachment utility APIs — upload with progress/error callbacks and context, download by attachment id and context.
-
-## 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 component props/variants, or by keeping the CSS import — whichever produces the closest match.
-3. Do NOT silently drop legacy styling utility classes — map each one to an equivalent style.
-
-## Key Rules
-
-- Widgets are self-contained — they manage their own data fetching
-- Use the platform's data page utility for data page access
-- Use the platform's attachment utility for file operations
-- Always handle loading and error states
-- Widgets may subscribe to platform events via the platform's pub/sub utility
-- Clean up subscriptions when the component unmounts
-- Do NOT drop card padding, list item spacing, or avatar sizing when removing legacy presentation components — replicate them in the replacement