@cratis/scene.primereact 0.1.0

package/for_properties/when_reading_an_array_property.ts

@@ -0,0 +1,41 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { SceneElement } from '@cratis/scene.model';
+import { arrayProperty, recordArrayProperty, stringArrayProperty } from '../properties';
+
+describe('when reading an array property', () => {
+    const element: SceneElement = {
+        id: 'element',
+        properties: {
+            mixed: ['a', 2, { name: 'c' }, ['d'], undefined],
+            notAnArray: 'a',
+        },
+    };
+
+    describe('and the property is present and an array', () => {
+        it('should return every entry untouched', () => {
+            arrayProperty(element, 'mixed').should.have.lengthOf(5);
+        });
+
+        it('should keep only the strings when strings were asked for', () => {
+            stringArrayProperty(element, 'mixed').should.deep.equal(['a']);
+        });
+
+        it('should keep only the objects when objects were asked for, excluding arrays', () => {
+            recordArrayProperty(element, 'mixed').should.deep.equal([{ name: 'c' }]);
+        });
+    });
+
+    describe('and the property is missing', () => {
+        it('should return an empty array rather than undefined, because every caller maps over it', () => {
+            arrayProperty(element, 'absent').should.deep.equal([]);
+        });
+    });
+
+    describe('and the property is present but not an array', () => {
+        it('should treat it exactly like a missing one', () => {
+            arrayProperty(element, 'notAnArray').should.deep.equal([]);
+        });
+    });
+});

package/for_properties/when_reading_options.ts

@@ -0,0 +1,50 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { SceneElement } from '@cratis/scene.model';
+import { optionsProperty } from '../properties';
+
+describe('when reading options', () => {
+    describe('and the options are written as bare strings', () => {
+        const element: SceneElement = { id: 'element', properties: { options: ['Draft', 'Published'] } };
+
+        it('should use each string as both label and value', () => {
+            optionsProperty(element, 'options').should.deep.equal([
+                { label: 'Draft', value: 'Draft' },
+                { label: 'Published', value: 'Published' },
+            ]);
+        });
+    });
+
+    describe('and the options are written as records', () => {
+        const element: SceneElement = { id: 'element', properties: { options: [{ label: 'Draft', value: 'draft' }] } };
+
+        it('should keep the label and value apart', () => {
+            optionsProperty(element, 'options').should.deep.equal([{ label: 'Draft', value: 'draft' }]);
+        });
+    });
+
+    describe('and a record carries only a label', () => {
+        const element: SceneElement = { id: 'element', properties: { options: [{ label: 'Draft' }] } };
+
+        it('should use the label as the value, which is what the shorthand means', () => {
+            optionsProperty(element, 'options').should.deep.equal([{ label: 'Draft', value: 'Draft' }]);
+        });
+    });
+
+    describe('and an entry carries no usable label', () => {
+        const element: SceneElement = { id: 'element', properties: { options: [{ value: 'draft' }, 7, { label: 'Draft' }] } };
+
+        it('should skip it rather than render a blank choice', () => {
+            optionsProperty(element, 'options').should.deep.equal([{ label: 'Draft', value: 'Draft' }]);
+        });
+    });
+
+    describe('and the property is missing', () => {
+        const element: SceneElement = { id: 'element', properties: {} };
+
+        it('should return no options', () => {
+            optionsProperty(element, 'options').should.deep.equal([]);
+        });
+    });
+});

package/for_treeNodes/when_converting_entries.ts

@@ -0,0 +1,43 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { toTreeNodes } from '../treeNodes';
+
+describe('when converting entries', () => {
+    describe('and no entry supplies a key', () => {
+        const nodes = toTreeNodes([{ label: 'Documents', children: [{ label: 'Work' }, { label: 'Work' }] }]);
+
+        it('should derive a key from the path', () => {
+            nodes[0].key!.should.equal('0');
+        });
+
+        it('should keep two identically labeled siblings apart, so expansion and selection track the right row', () => {
+            nodes[0].children![0].key!.should.equal('0-0');
+            nodes[0].children![1].key!.should.equal('0-1');
+        });
+    });
+
+    describe('and an entry supplies its own key', () => {
+        const nodes = toTreeNodes([{ key: 'docs', label: 'Documents', children: [{ label: 'Work' }] }]);
+
+        it('should keep it', () => {
+            nodes[0].key!.should.equal('docs');
+        });
+
+        it('should build child keys from it', () => {
+            nodes[0].children![0].key!.should.equal('docs-0');
+        });
+    });
+
+    describe('and an entry is a bare string', () => {
+        it('should use it as the label', () => {
+            toTreeNodes(['Documents'])[0].label!.should.equal('Documents');
+        });
+    });
+
+    describe('and an entry is neither a string nor a record', () => {
+        it('should drop it', () => {
+            toTreeNodes([7, ['nested'], 'Documents']).should.have.lengthOf(1);
+        });
+    });
+});

package/form/FormGallery.stories.tsx

@@ -0,0 +1,58 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { SceneElementView } from '@cratis/scene.react';
+import { primeReactComponents } from '../primeReactComponents';
+import { sceneComponent, sceneGallery } from '../storyElements';
+
+const meta = {
+    title: 'PrimeReact/Form',
+    component: SceneElementView,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: { description: { component: 'Every form component the PrimeReact package declares. Each one holds its own value locally, because a Scene element carries authored configuration and has nowhere to record what a user has typed - so a preview is genuinely usable rather than frozen.' } },
+    },
+} satisfies Meta<typeof SceneElementView>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Every component in this family, rendered through the real registry by the real renderer. */
+export const Gallery: Story = {
+    args: {
+        element: sceneGallery('gallery', [
+            sceneComponent('inputText', 'inputText', { placeholder: 'Name' }),
+            sceneComponent('inputTextarea', 'inputTextarea', { placeholder: 'Notes', rows: 3 }),
+            sceneComponent('inputNumber', 'inputNumber', { value: 42, showButtons: true }),
+            sceneComponent('password', 'password', { placeholder: 'Password' }),
+            sceneComponent('inputMask', 'inputMask', { mask: '99-999999' }),
+            sceneComponent('floatLabel', 'floatLabel', { label: 'Project name' }),
+            sceneComponent('iconField', 'iconField', { icon: 'pi pi-search', placeholder: 'Search' }),
+            sceneComponent('dropdown', 'dropdown', { options: ['Draft', 'In review', 'Published'], placeholder: 'Status' }),
+            sceneComponent('multiSelect', 'multiSelect', { options: ['Design', 'Engineering', 'Support'], display: 'chip' }),
+            sceneComponent('listBox', 'listBox', { options: ['Daily', 'Weekly', 'Monthly'] }),
+            sceneComponent('selectButton', 'selectButton', { options: ['Day', 'Week', 'Month'], value: 'Week' }),
+            sceneComponent('checkbox', 'checkbox', { label: 'Notify me', checked: true }),
+            sceneComponent('radioButton', 'radioButton', { options: ['Email', 'SMS'], value: 'Email' }),
+            sceneComponent('toggleSwitch', 'toggleSwitch', { label: 'Enabled', checked: true }),
+            sceneComponent('slider', 'slider', { value: 35 }),
+            sceneComponent('rating', 'rating', { value: 4 }),
+            sceneComponent('knob', 'knob', { value: 60 }),
+            sceneComponent('calendar', 'calendar', { value: '2026-08-16' }),
+            sceneComponent('colorPicker', 'colorPicker', { value: '#6366f1' }),
+            sceneComponent('chips', 'chips', { value: ['alpha', 'beta'] }),
+            sceneComponent('autoComplete', 'autoComplete', { options: ['Amsterdam', 'Athens', 'Auckland'], dropdown: true }),
+            sceneComponent('treeSelect', 'treeSelect', {
+                options: [{ label: 'Documents', children: ['Work', 'Home'] }],
+            }),
+            sceneComponent('cascadeSelect', 'cascadeSelect', {
+                options: [{ label: 'Europe', items: [{ label: 'Norway' }, { label: 'Sweden' }] }],
+            }),
+        ]),
+        registry: primeReactComponents,
+        resolveBinding: () => undefined,
+    },
+};

package/form/PrimeAutoComplete.tsx

@@ -0,0 +1,36 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import { AutoComplete } from 'primereact/autocomplete';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, optionsProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:autoComplete` component - a text field that suggests from a known set as you type.
+ *
+ * AutoComplete has no built-in filtering: it asks the host to produce suggestions through
+ * `completeMethod`, because in a real application that is a server call. A Scene element cannot express
+ * a server call, so the adapter filters the authored `options` case-insensitively instead - enough for
+ * the component to behave like itself in a preview, and honest about where the data came from.
+ */
+export function PrimeAutoComplete({ element }: RegisteredComponentProps) {
+    const options = optionsProperty(element, 'options');
+    const [value, setValue] = useState(stringProperty(element, 'value', ''));
+    const [suggestions, setSuggestions] = useState<string[]>([]);
+
+    return (
+        <AutoComplete
+            data-scene-id={element.id}
+            value={value}
+            onChange={(event) => setValue(typeof event.value === 'string' ? event.value : '')}
+            suggestions={suggestions}
+            completeMethod={(event) =>
+                setSuggestions(options.filter((option) => option.label.toLowerCase().includes(event.query.toLowerCase())).map((option) => option.label))
+            }
+            dropdown={booleanProperty(element, 'dropdown', false)}
+            placeholder={stringProperty(element, 'placeholder')}
+            disabled={booleanProperty(element, 'disabled', false)}
+        />
+    );
+}

package/form/PrimeCalendar.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import { Calendar } from 'primereact/calendar';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:calendar` component - a date picker.
+ *
+ * The seed value is parsed from an ISO date string because that is what survives a round trip through a
+ * Scene model's JSON properties; an unparseable one leaves the field empty rather than showing
+ * "Invalid Date".
+ *
+ * In PrimeReact 11 this component is renamed `DatePicker`.
+ */
+export function PrimeCalendar({ element }: RegisteredComponentProps) {
+    const [value, setValue] = useState<Date | undefined>(() => {
+        const seed = stringProperty(element, 'value');
+        if (seed === undefined) return undefined;
+        const parsed = new Date(seed);
+        return Number.isNaN(parsed.getTime()) ? undefined : parsed;
+    });
+
+    return (
+        <Calendar
+            data-scene-id={element.id}
+            value={value}
+            onChange={(event) => setValue(event.value instanceof Date ? event.value : undefined)}
+            dateFormat={stringProperty(element, 'dateFormat')}
+            showIcon={booleanProperty(element, 'showIcon', true)}
+            showTime={booleanProperty(element, 'showTime', false)}
+            inline={booleanProperty(element, 'inline', false)}
+            placeholder={stringProperty(element, 'placeholder')}
+            disabled={booleanProperty(element, 'disabled', false)}
+        />
+    );
+}

package/form/PrimeCascadeSelect.tsx

@@ -0,0 +1,31 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import { CascadeSelect } from 'primereact/cascadeselect';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, recordArrayProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:cascadeSelect` component - nested groups revealed one level at a time.
+ *
+ * Options are read as raw records rather than normalized to `SelectOption`, because a cascade is defined
+ * by the nesting itself: `optionGroupChildren` names the property each level recurses into, and
+ * flattening the records would destroy exactly the structure the component exists to show.
+ */
+export function PrimeCascadeSelect({ element }: RegisteredComponentProps) {
+    const [value, setValue] = useState<unknown>(stringProperty(element, 'value'));
+    return (
+        <CascadeSelect
+            data-scene-id={element.id}
+            value={value}
+            onChange={(event) => setValue(event.value)}
+            options={recordArrayProperty(element, 'options')}
+            optionLabel={stringProperty(element, 'optionLabel', 'label')}
+            optionGroupLabel={stringProperty(element, 'optionGroupLabel', 'label')}
+            optionGroupChildren={[stringProperty(element, 'optionGroupChildren', 'items')]}
+            placeholder={stringProperty(element, 'placeholder', 'Select')}
+            disabled={booleanProperty(element, 'disabled', false)}
+        />
+    );
+}

package/form/PrimeCheckbox.tsx

@@ -0,0 +1,29 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import { Checkbox } from 'primereact/checkbox';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:checkbox` component.
+ *
+ * Rendered with its label rather than bare: an unlabeled checkbox has no accessible name and nothing to
+ * click but a 20-pixel box, which is a defect in every screen that would ever use one.
+ */
+export function PrimeCheckbox({ element }: RegisteredComponentProps) {
+    const [checked, setChecked] = useState(booleanProperty(element, 'checked', false));
+    const label = stringProperty(element, 'label');
+    return (
+        <div data-scene-id={element.id} className='flex items-center gap-2'>
+            <Checkbox
+                inputId={element.id}
+                checked={checked}
+                onChange={(event) => setChecked(event.checked === true)}
+                disabled={booleanProperty(element, 'disabled', false)}
+            />
+            {label !== undefined && <label htmlFor={element.id}>{label}</label>}
+        </div>
+    );
+}

package/form/PrimeChips.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import { Chips } from 'primereact/chips';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringArrayProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:chips` component - free-form entry of a list of short values, each shown as a chip.
+ *
+ * In PrimeReact 11 this component is renamed `InputTags`.
+ */
+export function PrimeChips({ element }: RegisteredComponentProps) {
+    const [value, setValue] = useState<string[]>(stringArrayProperty(element, 'value'));
+    return (
+        <Chips
+            data-scene-id={element.id}
+            value={value}
+            onChange={(event) => setValue(event.value ?? [])}
+            max={undefined}
+            placeholder={stringProperty(element, 'placeholder')}
+            disabled={booleanProperty(element, 'disabled', false)}
+        />
+    );
+}

package/form/PrimeColorPicker.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import { ColorPicker } from 'primereact/colorpicker';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:colorPicker` component.
+ *
+ * The value is kept as a hex string without the leading `#`, which is what ColorPicker's default
+ * `hex` format expects; a screen writing `#6366f1` therefore still works.
+ */
+export function PrimeColorPicker({ element }: RegisteredComponentProps) {
+    const [value, setValue] = useState(stringProperty(element, 'value', '6366f1').replace('#', ''));
+    return (
+        <ColorPicker
+            data-scene-id={element.id}
+            value={value}
+            onChange={(event) => setValue(typeof event.value === 'string' ? event.value : value)}
+            inline={booleanProperty(element, 'inline', false)}
+            disabled={booleanProperty(element, 'disabled', false)}
+        />
+    );
+}

package/form/PrimeDropdown.tsx

@@ -0,0 +1,34 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import { Dropdown } from 'primereact/dropdown';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, optionsProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:dropdown` component - a single-choice select.
+ *
+ * Options are normalized by `optionsProperty`, so a screen may write either bare strings or
+ * `{ label, value }` records and get the same result.
+ *
+ * In PrimeReact 11 this component is renamed `Select`; see the migration notes in the package
+ * documentation.
+ */
+export function PrimeDropdown({ element }: RegisteredComponentProps) {
+    const [value, setValue] = useState<string | undefined>(stringProperty(element, 'value'));
+    return (
+        <Dropdown
+            data-scene-id={element.id}
+            value={value}
+            onChange={(event) => setValue(event.value)}
+            options={optionsProperty(element, 'options')}
+            optionLabel='label'
+            optionValue='value'
+            placeholder={stringProperty(element, 'placeholder', 'Select')}
+            filter={booleanProperty(element, 'filter', false)}
+            showClear={booleanProperty(element, 'showClear', false)}
+            disabled={booleanProperty(element, 'disabled', false)}
+        />
+    );
+}

package/form/PrimeFloatLabel.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { FloatLabel } from 'primereact/floatlabel';
+import { InputText } from 'primereact/inputtext';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:floatLabel` component - a label that starts inside its field and floats above it once
+ * the field has focus or a value.
+ *
+ * FloatLabel is a wrapper, not a field, so the field it decorates comes from the `content` slot. An
+ * empty slot falls back to a plain text input rather than rendering a label attached to nothing, which
+ * would look like a styling bug rather than a missing child.
+ */
+export function PrimeFloatLabel({ element, slots }: RegisteredComponentProps) {
+    const label = stringProperty(element, 'label', 'Label');
+    return (
+        <FloatLabel data-scene-id={element.id}>
+            {slots.content?.length ? slots.content : <InputText id={element.id} />}
+            <label htmlFor={element.id}>{label}</label>
+        </FloatLabel>
+    );
+}

package/form/PrimeIconField.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { InputText } from 'primereact/inputtext';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:iconField` component - a field with an icon rendered inside it.
+ *
+ * Like {@link PrimeFloatLabel} this decorates a field rather than being one, so the field comes from the
+ * `content` slot with a plain text input as the fallback.
+ */
+export function PrimeIconField({ element, slots }: RegisteredComponentProps) {
+    return (
+        <IconField data-scene-id={element.id} iconPosition={stringProperty(element, 'iconPosition', 'left') as 'left' | 'right'}>
+            <InputIcon className={stringProperty(element, 'icon', 'pi pi-search')} />
+            {slots.content?.length ? slots.content : <InputText placeholder={stringProperty(element, 'placeholder')} />}
+        </IconField>
+    );
+}

package/form/PrimeInputMask.tsx

@@ -0,0 +1,27 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import { InputMask } from 'primereact/inputmask';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:inputMask` component - a text field constrained to a fixed pattern.
+ *
+ * Defaults to a phone-number mask so an element authored with nothing but a name still demonstrates
+ * what a mask does; a real screen always supplies its own `mask`.
+ */
+export function PrimeInputMask({ element }: RegisteredComponentProps) {
+    const [value, setValue] = useState(stringProperty(element, 'value', ''));
+    return (
+        <InputMask
+            data-scene-id={element.id}
+            value={value}
+            onChange={(event) => setValue(event.target.value ?? '')}
+            mask={stringProperty(element, 'mask', '(999) 999-9999')}
+            placeholder={stringProperty(element, 'placeholder')}
+            disabled={booleanProperty(element, 'disabled', false)}
+        />
+    );
+}

package/form/PrimeInputNumber.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import { InputNumber } from 'primereact/inputnumber';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, numberProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:inputNumber` component - a numeric field with locale-aware formatting.
+ *
+ * `mode` and `currency` are passed straight through because that is where InputNumber earns its keep
+ * over a plain text field: it formats and parses in the user's locale rather than making a screen do it.
+ */
+export function PrimeInputNumber({ element }: RegisteredComponentProps) {
+    const [value, setValue] = useState<number | undefined>(numberProperty(element, 'value'));
+    const currency = stringProperty(element, 'currency');
+    return (
+        <InputNumber
+            data-scene-id={element.id}
+            value={value}
+            onValueChange={(event) => setValue(typeof event.value === 'number' ? event.value : undefined)}
+            mode={currency === undefined ? 'decimal' : 'currency'}
+            currency={currency}
+            min={numberProperty(element, 'min')}
+            max={numberProperty(element, 'max')}
+            showButtons={booleanProperty(element, 'showButtons', false)}
+            placeholder={stringProperty(element, 'placeholder')}
+            disabled={booleanProperty(element, 'disabled', false)}
+        />
+    );
+}

package/form/PrimeInputText.tsx

@@ -0,0 +1,31 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import { InputText } from 'primereact/inputtext';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:inputText` component - a single-line text field.
+ *
+ * PrimeReact inputs are controlled, and a Scene element has nowhere to put "what the user has typed so
+ * far" - `properties` is authored design-time configuration, not live state. The adapter therefore owns
+ * that state locally, seeded from the `value` property. The consequence is deliberate and worth knowing:
+ * a preview is genuinely typeable instead of frozen, and the typed value is local to the rendered
+ * component rather than pushed back into the model.
+ */
+export function PrimeInputText({ element }: RegisteredComponentProps) {
+    const [value, setValue] = useState(stringProperty(element, 'value', ''));
+    return (
+        <InputText
+            data-scene-id={element.id}
+            value={value}
+            onChange={(event) => setValue(event.target.value)}
+            placeholder={stringProperty(element, 'placeholder')}
+            disabled={booleanProperty(element, 'disabled', false)}
+            readOnly={booleanProperty(element, 'readOnly', false)}
+            invalid={booleanProperty(element, 'invalid', false)}
+        />
+    );
+}

package/form/PrimeInputTextarea.tsx

@@ -0,0 +1,28 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, numberProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:inputTextarea` component - a multi-line text field.
+ *
+ * Holds the typed value locally for the same reason {@link PrimeInputText} does.
+ */
+export function PrimeInputTextarea({ element }: RegisteredComponentProps) {
+    const [value, setValue] = useState(stringProperty(element, 'value', ''));
+    return (
+        <InputTextarea
+            data-scene-id={element.id}
+            value={value}
+            onChange={(event) => setValue(event.target.value)}
+            rows={numberProperty(element, 'rows', 4)}
+            cols={numberProperty(element, 'cols')}
+            autoResize={booleanProperty(element, 'autoResize', false)}
+            placeholder={stringProperty(element, 'placeholder')}
+            disabled={booleanProperty(element, 'disabled', false)}
+        />
+    );
+}

package/form/PrimeKnob.tsx

@@ -0,0 +1,27 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import { Knob } from 'primereact/knob';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, numberProperty } from '../properties';
+
+/**
+ * The `PrimeReact:knob` component - a circular value picker that doubles as a readout.
+ */
+export function PrimeKnob({ element }: RegisteredComponentProps) {
+    const [value, setValue] = useState(numberProperty(element, 'value', 0));
+    return (
+        <Knob
+            data-scene-id={element.id}
+            value={value}
+            onChange={(event) => setValue(event.value)}
+            min={numberProperty(element, 'min', 0)}
+            max={numberProperty(element, 'max', 100)}
+            step={numberProperty(element, 'step', 1)}
+            size={numberProperty(element, 'size', 100)}
+            readOnly={booleanProperty(element, 'readOnly', false)}
+            disabled={booleanProperty(element, 'disabled', false)}
+        />
+    );
+}