thunder-id · DonOmalVindula · Jul 28, 2026 · Jul 27, 2026
@@ -16,17 +16,12 @@
  * under the License.
  */
 
-import {Box, FormControl, FormLabel, IconButton, Stack, TextField, Tooltip} from '@wso2/oxygen-ui';
-import {Plus, Trash} from '@wso2/oxygen-ui-icons-react';
-import {useState, type ReactElement} from 'react';
+import {Autocomplete, Box, Chip, FormControl, FormLabel, TextField} from '@wso2/oxygen-ui';
+import {useState, type ReactElement, type SyntheticEvent} from 'react';
 import {useTranslation} from 'react-i18next';
-import PanelActionButton from './PanelActionButton';
 import type {Resource} from '../../models/resources';
 
-const parseClasses = (value: string): string[] => {
-  const classes = (value ?? '').split(/\s+/).filter(Boolean);
-  return classes.length > 0 ? classes : [''];
-};
+const parseClasses = (value: string): string[] => (value ?? '').split(/\s+/).filter(Boolean);
 
 /**
  * Props interface of {@link ClassesPropertyField}
@@ -70,24 +65,12 @@ function ClassesPropertyField({
   const {t} = useTranslation();
   const [classNames, setClassNames] = useState<string[]>(() => parseClasses(propertyValue));
 
-  const commitClasses = (updated: string[], debounce?: boolean): void => {
-    setClassNames(updated);
-    onChange(propertyKey, updated.join(' '), resource, debounce);
-  };
-
-  const handleAdd = (): void => {
-    commitClasses([...classNames, '']);
-  };
-
-  const handleRemove = (index: number): void => {
-    commitClasses(classNames.filter((_, i) => i !== index));
-  };
-
-  const handleChange = (index: number, value: string): void => {
-    commitClasses(
-      classNames.map((className, i) => (i === index ? value : className)),
-      true,
-    );
+  const commitClasses = (updated: string[]): void => {
+    // Class names are whitespace separated, so a typed value cannot contain spaces.
+    const normalized: string[] = updated.flatMap((entry: string) => entry.split(/\s+/).filter(Boolean));
+    const deduped: string[] = [...new Set(normalized)];
+    setClassNames(deduped);
+    onChange(propertyKey, deduped.join(' '), resource);
   };
 
   return (
@@ -96,33 +79,32 @@ function ClassesPropertyField({
         <FormLabel htmlFor={`${resource.id}-${propertyKey}`}>
           {t('flows:core.elements.classesPropertyField.label')}
         </FormLabel>
-
-        <Stack spacing={2} id={`${resource.id}-${propertyKey}`}>
-          {classNames.map((className, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <Stack key={index} direction="row" spacing={1} alignItems="flex-start">
-              <TextField
-                fullWidth
-                value={className}
-                onChange={(e) => handleChange(index, e.target.value)}
-                placeholder={t('flows:core.elements.classesPropertyField.placeholder')}
-              />
-              {classNames.length > 1 && (
-                <Tooltip title={t('common:actions.delete')}>
-                  <IconButton onClick={() => handleRemove(index)} color="error">
-                    <Trash size={20} />
-                  </IconButton>
-                </Tooltip>
-              )}
-            </Stack>
-          ))}
-
-          <Box>
-            <PanelActionButton startIcon={<Plus size={16} />} onClick={handleAdd}>
-              {t('flows:core.elements.classesPropertyField.addClass')}
-            </PanelActionButton>
-          </Box>
-        </Stack>
+        {/* One tag input rather than a stack of text fields: classes are short tokens,
+            so they read better as chips and the field stays a fixed height. */}
+        <Autocomplete
+          multiple
+          freeSolo
+          autoSelect
+          clearOnBlur
+          options={[] as string[]}
+          value={classNames}
+          onChange={(_event: SyntheticEvent, newValue: string[]) => commitClasses(newValue)}
+          renderTags={(value: string[], getTagProps) =>
+            value.map((option: string, index: number) => {
+              const {key, ...tagProps} = getTagProps({index});
+              return <Chip key={key} size="small" label={option} {...tagProps} />;
+            })
+          }
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              id={`${resource.id}-${propertyKey}`}
+              placeholder={
+                classNames.length === 0 ? t('flows:core.elements.classesPropertyField.placeholder') : undefined
+              }
+            />
+          )}
+        />
       </FormControl>
     </Box>
   );

@@ -16,6 +16,7 @@
  * under the License.
  */
 
+import {parseStackItems} from '@thunderid/design';
 import {useLogger} from '@thunderid/logger/react';
 import {
   Autocomplete,
@@ -40,6 +41,37 @@ import type {Resource} from '../../models/resources';
 
 const TEXT_ALIGN_VALUES = ['left', 'center', 'right', 'justify', 'inherit'] as const;
 
+// Layout properties with a known value set. Rendered as free-text autocompletes so
+// the common values are discoverable while custom CSS values stay allowed.
+const LAYOUT_PROPERTY_SUGGESTIONS: Record<string, string[]> = {
+  align: ['stretch', 'center', 'flex-start', 'flex-end', 'baseline', 'start', 'end'],
+  direction: ['row', 'column', 'row-reverse', 'column-reverse'],
+  justify: ['stretch', 'center', 'flex-start', 'flex-end', 'space-between', 'space-around', 'space-evenly'],
+};
+
+// Structural layout values map straight to CSS rather than being shown to end users,
+// so they take literal values only: no i18n or meta template insertion.
+const LAYOUT_PROPERTY_KEYS: string[] = ['align', 'direction', 'gap', 'items', 'justify'];
+
+// A grid stack uses `direction` to pick the axis its slots run along. CSS Grid has no
+// reverse auto-flow, so the reverse variants are only offered in flex mode.
+const GRID_DIRECTION_VALUES: string[] = ['row', 'column'];
+
+/**
+ * Suggestions for a layout property, narrowed to the values the resource's current
+ * layout mode actually honors.
+ */
+function getLayoutSuggestions(resource: Resource, propertyKey: string): string[] {
+  const isGridStack: boolean =
+    resource.type === ElementTypes.Stack &&
+    parseStackItems((resource as Resource & {items?: string | number}).items) !== undefined;
+
+  if (isGridStack && propertyKey === 'direction') {
+    return GRID_DIRECTION_VALUES;
+  }
+  return LAYOUT_PROPERTY_SUGGESTIONS[propertyKey];
+}
+
 // ---------------------------------------------------------------------------
 // Lazy icon loading — loaded once on first picker open, then cached.
 // Using a type-only import avoids pulling the entire icons bundle into every
@@ -240,6 +272,24 @@ function CommonElementPropertyFactory({
     );
   }
 
+  const isLayoutProperty: boolean = LAYOUT_PROPERTY_KEYS.includes(propertyKey);
+
+  // Own-property check: a bare index lookup also matches inherited members such as
+  // `toString`, and element config keys are arbitrary.
+  if (Object.hasOwn(LAYOUT_PROPERTY_SUGGESTIONS, propertyKey) && typeof propertyValue === 'string') {
+    return (
+      <TextPropertyField
+        resource={resource}
+        propertyKey={propertyKey}
+        propertyValue={propertyValue}
+        onChange={onChange}
+        suggestions={getLayoutSuggestions(resource, propertyKey)}
+        supportsDynamicValue={false}
+        {...rest}
+      />
+    );
+  }
+
   if (typeof propertyValue === 'boolean') {
     return (
       <CheckboxPropertyField
@@ -259,6 +309,9 @@ function CommonElementPropertyFactory({
         propertyKey={propertyKey}
         propertyValue={String(propertyValue)}
         onChange={(key, value, res) => onChange(key, value !== '' ? Number(value) : 0, res, true)}
+        supportsDynamicValue={!isLayoutProperty}
+        type="number"
+        slotProps={{htmlInput: {min: 0}}}
         {...rest}
       />
     );

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {Box, Stack, Typography} from '@wso2/oxygen-ui';
+import type {ReactElement, ReactNode} from 'react';
+
+/**
+ * Props interface of {@link PropertySection}
+ */
+export interface PropertySectionPropsInterface {
+  /**
+   * Section heading.
+   */
+  title: string;
+  /**
+   * Fields belonging to the section.
+   */
+  children: ReactNode;
+}
+
+/**
+ * Groups related properties under a quiet heading so identity, content, layout and
+ * validation settings are scannable instead of being one flat list of fields.
+ *
+ * @param props - Props injected to the component.
+ * @returns The PropertySection component.
+ */
+function PropertySection({title, children}: PropertySectionPropsInterface): ReactElement {
+  return (
+    <Box component="section" sx={{'& + &': {mt: 1}}}>
+      <Typography
+        variant="overline"
+        color="text.secondary"
+        sx={{display: 'block', letterSpacing: '0.08em', lineHeight: 1.6, mb: 0.5}}
+      >
+        {title}
+      </Typography>
+      <Stack gap={2}>{children}</Stack>
+    </Box>
+  );
+}
+
+export default PropertySection;
@@ -111,7 +111,9 @@ function ResourcePropertyPanel({open = false, onComponentDelete}: ResourceProper
         <ResourceProperties />
       </Box>
       {lastInteractedResource && lastInteractedResource.deletable !== false && (
-        <Box flexShrink={0}>
+        // Footer: a destructive action should read as separate from the fields above
+        // it, not as the next item in the list.
+        <Box flexShrink={0} sx={{borderTop: '1px solid', borderColor: 'divider', pt: 2, mt: 1}}>
           <PanelActionButton accent="error" onClick={handleDelete} startIcon={<TrashIcon size={16} />}>
             {t('flows:core.propertiesPanel.delete', 'Delete')}
           </PanelActionButton>