@_linked/shape-ui 2.0.0 → 2.3.0

package/lib/esm/components/CustomMultiSelect.module.css

@@ -0,0 +1,291 @@
+/* ============================================================================
+   CustomMultiSelect.module.css
+
+   Multi-select dropdown with search and create new functionality.
+   Uses semantic tokens from theme.css.
+   ============================================================================ */
+
+/* === Root Container === */
+.Root {
+  display: flex;
+  gap: var(--space-sm);
+  align-items: center;
+  position: relative;
+  width: 100%;
+}
+
+/* === Table icon === */
+.tableIcon {
+  cursor: pointer;
+  color: var(--custom-multi-select-gray-500, var(--color-gray-500));
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  transition: color var(--transition-fast);
+}
+
+.tableIcon:hover {
+  color: var(--custom-multi-select-tertiary-500, var(--color-tertiary-500));
+}
+
+/* === Selected Options Container === */
+.selectedOptionsAndChevronIconContainer {
+  display: flex;
+  gap: var(--space-sm);
+  align-items: center;
+  width: 100%;
+  padding: var(--surface-gap) 0;
+  overflow-x: hidden;
+}
+
+.selectedOptionsContainer {
+  position: relative;
+  border: 1px solid var(--field-border);
+  border-radius: var(--radius-field);
+  width: 100%;
+  padding: 0;
+  background-color: var(--field-bg);
+}
+
+.selectedOptionsContainer.expanded {
+  overflow-y: scroll;
+  flex-wrap: wrap;
+}
+
+/* === Chips Container === */
+.noBorderContainer {
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 196px;
+  padding: var(--space-sm) 0 var(--space-sm) var(--space-sm);
+  gap: var(--space-sm);
+  width: 93%;
+  overflow-y: hidden;
+  border-color: transparent;
+}
+
+.noBorderContainer.expanded {
+  overflow-y: scroll;
+}
+
+/* === Chevron Icon === */
+.chevronDownIcon {
+  opacity: 0.4;
+  transition: transform var(--transition-fast), opacity var(--transition-fast);
+  position: absolute;
+  right: 0.25rem;
+  top: 51%;
+  transform: translate(-40px, -50%);
+  color: var(--custom-multi-select-gray-500, var(--color-gray-500));
+}
+
+.chevronDownIcon.open {
+  opacity: 0.7;
+  transform: rotate(180deg) translate(40px, 0.75rem);
+}
+
+/* === Option chips (selected values) === */
+.optionButton {
+  border-radius: var(--radius-full);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+/* === Selector placeholder === */
+.selectorButton {
+  color: var(--field-text-placeholder);
+  font-size: var(--typography-small-size);
+}
+
+/* ============================================================================
+   Dropdown (Popover.Content)
+   ============================================================================ */
+
+
+.options {
+  width: 100%;
+  padding: 0;
+  background-color: var(--surface-bg);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-field);
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+}
+
+/* === Search wrapper === */
+.searchWrapper {
+  position: relative;
+  border-bottom: 1px solid var(--surface-border);
+}
+
+/* === Command input === */
+input[cmdk-input] {
+  width: 100%;
+  background-color: var(--field-bg);
+  color: var(--field-text);
+  border: none;
+  padding: var(--space-sm-plus) var(--space-xl) var(--space-sm-plus) var(--space-md);
+  font-size: var(--typography-small-size);
+}
+
+input[cmdk-input]::placeholder {
+  color: var(--field-text-placeholder);
+}
+
+/* === Reset search icon === */
+.resetSearchInputIcon {
+  position: absolute;
+  right: var(--space-md);
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0.5;
+  color: var(--custom-multi-select-gray-500, var(--color-gray-500));
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.resetSearchInputIcon:hover {
+  opacity: 1;
+  color: var(--custom-multi-select-tertiary-500, var(--color-tertiary-500));
+}
+
+/* === Command root / list === */
+.commandRoot {
+  position: relative;
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+/* === Options group === */
+.commandGroup {
+  padding: var(--space-xs) 0;
+}
+
+/* === Individual option item === */
+.option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-sm-plus) var(--space-md);
+  font-size: var(--typography-small-size);
+  cursor: pointer;
+  gap: var(--space-sm);
+}
+
+.optionLabel {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.optionCheck {
+  flex-shrink: 0;
+  color: var(--custom-multi-select-tertiary-500, var(--color-tertiary-500));
+}
+
+.optionSelected {
+  opacity: 0.6;
+}
+
+/* === Empty result === */
+.emptyResult {
+  text-align: left;
+  padding: var(--space-sm-plus) var(--space-md);
+  font-size: var(--typography-small-size);
+  color: var(--custom-multi-select-gray-500, var(--color-gray-500));
+}
+
+/* === Load More sentinel (infinite scroll) === */
+.loadMoreSentinel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--space-sm) 0;
+  min-height: 32px;
+}
+
+/* === "Create New" section === */
+.createNewContainer {
+  border-top: 1px solid var(--surface-border);
+  padding: 0;
+}
+
+.modalButton {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  width: 100%;
+  border: none;
+  background: transparent;
+  padding: var(--space-sm-plus) var(--space-md);
+  font-size: var(--typography-small-size);
+  color: var(--custom-multi-select-tertiary-500, var(--color-tertiary-500));
+  cursor: pointer;
+  text-align: left;
+  transition: background var(--transition-fast);
+}
+
+.modalButton:hover {
+  background: color-mix(in srgb, var(--custom-multi-select-tertiary-500, var(--color-tertiary-500)) 8%, transparent);
+}
+
+/* === View Less text (expand/collapse) === */
+.viewLessText {
+  color: var(--custom-multi-select-gray-500, var(--color-gray-500));
+  font-size: var(--typography-small-size);
+  padding: 0 var(--space-sm);
+  position: absolute;
+  bottom: 3px;
+  left: 15px;
+  border-radius: var(--radius-full);
+  background: var(--surface-bg);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.viewLessText:hover {
+  color: var(--custom-multi-select-tertiary-500, var(--color-tertiary-500));
+}
+
+/* === Dialog === */
+.dialogRoot {
+  background-color: var(--modal-bg, var(--surface-bg));
+  border: 1px solid var(--modal-border, var(--surface-border));
+  border-radius: var(--radius-modal);
+  min-width: min(90vw, 680px);
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.dialogHeader {
+  padding: var(--space-xl) var(--space-xl) var(--space-md);
+  border-bottom: 1px solid var(--surface-border);
+  flex-shrink: 0;
+}
+
+.dialogContent {
+  overflow-y: auto;
+  flex: 1;
+  padding: 0 var(--space-md) var(--space-md);
+}
+
+/* ============================================================================
+   Dark Mode
+   ============================================================================ */
+
+/* All surfaces use semantic tokens that auto-switch in dark mode */
+
+[data-theme='dark'] .modalButton {
+  color: var(--custom-multi-select-tertiary-400, var(--color-tertiary-400));
+}
+
+[data-theme='dark'] .viewLessText {
+  color: var(--custom-multi-select-gray-400, var(--color-gray-400));
+}
+
+[data-theme='dark'] .options {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
+}

package/lib/esm/components/DynamicFormField.d.ts

@@ -0,0 +1,21 @@
+import type { PropertyShapeWire } from '@_linked/core/shapes/nodeShapeWire';
+import { Shape } from '@_linked/core/shapes/Shape';
+import type { FieldDependencyState } from '../shape/useFormDependencies.js';
+interface DynamicFormProps {
+    dataType?: any;
+    formName: string;
+    label: string;
+    placeholder: string;
+    required: boolean;
+    value?: any;
+    shape: any;
+    of: Shape;
+    property: PropertyShapeWire;
+    onBeforeNavigate?: () => Promise<string | void> | string | void;
+    /** External error from submit-time validation */
+    error?: string;
+    /** Dependency state from parent fields (visibility + narrowing) */
+    dependencyState?: FieldDependencyState;
+}
+declare function DynamicForm({ dataType, formName, label, placeholder, required, value, shape, of, property, onBeforeNavigate, error: externalError, dependencyState, }: DynamicFormProps): import("react").JSX.Element;
+export { DynamicForm };

package/lib/esm/components/DynamicFormField.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip } from '@_linked/primitives/components/Tooltip';
+import { shacl } from '@_linked/core/ontologies/shacl';
+import { xsd } from '@_linked/core/ontologies/xsd';
+import { useState } from 'react';
+import { Icons } from '@_linked/icons';
+import { getNodeDisplay, enumOptions } from '../shape/nodeDisplay.js';
+import { validateField } from '../shape/validation.js';
+import style from './DynamicFormField.module.css';
+import { FormField } from './FormField.js';
+import NodeValuesEditor from './NodeValuesEditor.js';
+// Helper: format a Date or ISO string for <input type="date">
+function toDateInputValue(val) {
+    if (!val)
+        return '';
+    if (val instanceof Date)
+        return val.toISOString().split('T')[0];
+    if (typeof val === 'string')
+        return val.split('T')[0];
+    return '';
+}
+// Helper: format a Date or ISO string for <input type="datetime-local">
+function toDateTimeInputValue(val) {
+    if (!val)
+        return '';
+    if (val instanceof Date)
+        return val.toISOString().slice(0, 16);
+    if (typeof val === 'string')
+        return val.slice(0, 16);
+    return '';
+}
+/** Compute HTML min/max attrs from SHACL inclusive/exclusive constraints */
+function computeNumericBounds(property, isInteger) {
+    const attrs = {};
+    if (property.minInclusive != null) {
+        attrs.min = property.minInclusive;
+    }
+    else if (property.minExclusive != null) {
+        // The metamodel types the bound as `string | number` — a SHACL literal can be either —
+        // where the DTO had already coerced it to a number.
+        const bound = Number(property.minExclusive);
+        attrs.min = isInteger ? bound + 1 : bound;
+    }
+    if (property.maxInclusive != null) {
+        attrs.max = property.maxInclusive;
+    }
+    else if (property.maxExclusive != null) {
+        attrs.max = isInteger ? property.maxExclusive - 1 : property.maxExclusive;
+    }
+    return attrs;
+}
+function FieldWrapper({ label, required, error, description, children, }) {
+    return (_jsxs("div", { className: style.form, children: [_jsx("div", { className: style.label, children: _jsxs("label", { children: [label, " ", required && _jsx("sup", { children: "*" }), description && (_jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { type: "button", className: style.infoIcon, "aria-label": `Info about ${label}`, children: _jsx(Icons.Info, { width: 14, height: 14 }) }) }), _jsxs(Tooltip.Content, { side: "top", sideOffset: 4, className: style.tooltipContent, children: [description, _jsx(Tooltip.Arrow, {})] })] }))] }) }), _jsxs("div", { className: style.value, children: [children, error && _jsx("span", { className: style.fieldError, children: error })] })] }));
+}
+function DynamicForm({ dataType, formName, label, placeholder = 'Type here', required = false, value, shape, of, property, onBeforeNavigate, error: externalError, dependencyState, }) {
+    var _a, _b, _c, _d;
+    const [localError, setLocalError] = useState('');
+    const displayError = externalError || localError;
+    const datatype = property.datatype;
+    const nodeKind = property.nodeKind;
+    const valueShape = property.valueShape;
+    const handleBlur = (val) => {
+        const err = validateField(property, val);
+        setLocalError(err);
+    };
+    // Guard: skip properties without nodeKind (incomplete shape data)
+    if (!nodeKind)
+        return null;
+    // ── sh:in enumeration → render as <select> dropdown (both literal and IRI) ──
+    //
+    // `enumOptions` derives the label. `sh:in` carries members, not names — the DTO's `inValues`
+    // looked like it carried names but they were the IRI's local part, computed at projection
+    // time. Same answer, computed in one place.
+    const choices = enumOptions(property);
+    if (choices.length > 0) {
+        const currentValue = value !== undefined && value !== null
+            ? typeof value === 'object' && value.id
+                ? value.id
+                : String(value)
+            : '';
+        return (_jsx(FieldWrapper, { label: label, required: required, error: displayError, description: property.description, children: _jsxs("select", { className: style.selectField, required: required, defaultValue: currentValue, onChange: (e) => {
+                    of[property.label] = e.target.value || undefined;
+                }, onBlur: (e) => handleBlur(e.target.value), children: [_jsx("option", { value: "", children: "\u2014 Select \u2014" }), choices.map((opt) => (_jsx("option", { value: opt.id, children: opt.label }, opt.id)))] }) }));
+    }
+    // Object / IRI properties — rendered by NodeValuesEditor (CustomMultiSelect)
+    if (nodeKind.id === shacl.IRI.id ||
+        nodeKind.id === shacl.BlankNode.id ||
+        nodeKind.id === shacl.BlankNodeOrIRI.id) {
+        // Dependency hint: show subtle text when parent field can narrow this field
+        const narrowingHint = dependencyState && !dependencyState.parentHasValue
+            ? dependencyState.parentLabels
+                .map((l) => l.replace(/([A-Z])/g, ' $1').replace(/^./, (c) => c.toUpperCase()).trim())
+                .join(' or ')
+            : null;
+        return (_jsxs(FieldWrapper, { label: label, required: required, error: displayError, description: property.description, children: [narrowingHint && (_jsxs("span", { className: style.narrowingHint, children: ["Select ", narrowingHint, " to narrow options"] })), _jsx(NodeValuesEditor, { sourceShape: shape, of: of, property: property, onBeforeNavigate: onBeforeNavigate, narrowedIds: dependencyState === null || dependencyState === void 0 ? void 0 : dependencyState.narrowedIds, isNarrowing: dependencyState === null || dependencyState === void 0 ? void 0 : dependencyState.loading })] }));
+    }
+    // Literal properties
+    if (nodeKind.id === shacl.Literal.id) {
+        const dt = datatype === null || datatype === void 0 ? void 0 : datatype.id;
+        // Boolean → native checkbox
+        if (dt === xsd.boolean.id) {
+            return (_jsx(FieldWrapper, { label: label, required: required, error: displayError, description: property.description, children: _jsx("input", { type: "checkbox", className: style.checkboxField, defaultChecked: !!value, onChange: (e) => { of[property.label] = e.target.checked; } }) }));
+        }
+        // Date
+        if (dt === xsd.date.id) {
+            return (_jsx(FieldWrapper, { label: label, required: required, error: displayError, description: property.description, children: _jsx("input", { type: "date", className: style.textFormField, required: required, defaultValue: toDateInputValue(value), onChange: (e) => { of[property.label] = e.target.value; }, onBlur: (e) => handleBlur(e.target.value) }) }));
+        }
+        // DateTime
+        if (dt === xsd.dateTime.id) {
+            return (_jsx(FieldWrapper, { label: label, required: required, error: displayError, description: property.description, children: _jsx("input", { type: "datetime-local", className: style.textFormField, required: required, defaultValue: toDateTimeInputValue(value), onChange: (e) => { of[property.label] = e.target.value; }, onBlur: (e) => handleBlur(e.target.value) }) }));
+        }
+        // Integer / long
+        if (dt === xsd.integer.id ||
+            dt === ((_a = xsd.long) === null || _a === void 0 ? void 0 : _a.id)) {
+            const bounds = computeNumericBounds(property, true);
+            return (_jsx(FieldWrapper, { label: label, required: required, error: displayError, description: property.description, children: _jsx("input", { type: "number", step: "1", className: style.textFormField, required: required, defaultValue: value !== undefined && value !== null ? Number(value) : '', ...bounds, onChange: (e) => { of[property.label] = parseInt(e.target.value, 10); }, onBlur: (e) => handleBlur(parseInt(e.target.value, 10)) }) }));
+        }
+        // Decimal / float / double
+        if (dt === ((_b = xsd.decimal) === null || _b === void 0 ? void 0 : _b.id) ||
+            dt === ((_c = xsd.float) === null || _c === void 0 ? void 0 : _c.id) ||
+            dt === ((_d = xsd.double) === null || _d === void 0 ? void 0 : _d.id)) {
+            const bounds = computeNumericBounds(property, false);
+            return (_jsx(FieldWrapper, { label: label, required: required, error: displayError, description: property.description, children: _jsx("input", { type: "number", step: "any", className: style.textFormField, required: required, defaultValue: value !== undefined && value !== null ? Number(value) : '', ...bounds, onChange: (e) => { of[property.label] = parseFloat(e.target.value); }, onBlur: (e) => handleBlur(parseFloat(e.target.value)) }) }));
+        }
+        // URI / anyURI
+        if (dt === 'http://www.w3.org/2001/XMLSchema#anyURI') {
+            return (_jsx(FieldWrapper, { label: label, required: required, error: displayError, description: property.description, children: _jsx(FormField, { name: formName, type: "url", placeholder: placeholder, className: style.textFormField, required: required, defaultValue: typeof value === 'string' ? value : '', onChange: (e) => { of[property.label] = e.target.value; }, onBlur: (e) => handleBlur(e.target.value) }) }));
+        }
+        // String (default) — also catches unknown datatypes
+        const strAttrs = {};
+        if (property.minLength != null)
+            strAttrs.minLength = property.minLength;
+        if (property.maxLength != null)
+            strAttrs.maxLength = property.maxLength;
+        if (property.pattern)
+            strAttrs.pattern = property.pattern;
+        return (_jsx(FieldWrapper, { label: label, required: required, error: displayError, description: property.description, children: _jsx(FormField, { name: formName, type: "text", placeholder: placeholder, className: style.textFormField, required: required, defaultValue: value !== undefined && value !== null
+                    ? typeof value === 'object'
+                        ? getNodeDisplay(value)
+                        : String(value)
+                    : '', ...strAttrs, onChange: (e) => { of[property.label] = e.target.value; }, onBlur: (e) => {
+                    of[property.label] = e.target.value;
+                    handleBlur(e.target.value);
+                } }) }));
+    }
+    return null;
+}
+export { DynamicForm };
+//# sourceMappingURL=DynamicFormField.js.map

package/lib/esm/components/DynamicFormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicFormField.js","sourceRoot":"","sources":["../../../src/components/DynamicFormField.tsx"],"names":[],"mappings":"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"}

package/lib/esm/components/DynamicFormField.module.css

@@ -0,0 +1,169 @@
+/* ============================================================================
+   DynamicFormField.module.css
+   
+   Dynamic form field component for various input types.
+   Uses semantic tokens from theme.css.
+   ============================================================================ */
+
+/* === Form Row === */
+.form {
+  display: flex;
+  min-height: 3.75rem;
+  align-items: center;
+  border-top: 1px solid var(--table-row-border);
+  justify-content: flex-start;
+  padding: var(--space-sm) 0;
+}
+
+.form:first-child {
+  border-top: none;
+}
+
+/* === Label Column === */
+.label {
+  display: flex;
+  flex-direction: column;
+  width: 30%;
+  height: 100%;
+  justify-content: center;
+}
+
+.label label {
+  font-weight: 400;
+  color: var(--text-auxiliary);
+  font-size: var(--typography-font-size);
+}
+
+.label p {
+  color: var(--table-cell-text);
+  color: var(--text-auxiliary);
+  font-size: var(--typography-small-size);
+  margin-top: 0.25rem;
+}
+
+.label sup {
+  color: var(--intent-danger-icon);
+  margin-left: var(--space-2xs);
+}
+
+/* === Value Column === */
+.value {
+  display: flex;
+  gap: var(--space-sm-plus);
+  width: 70%;
+  height: 100%;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* === Text Form Field === */
+.textFormField {
+  box-shadow: none;
+  border: 1px solid var(--field-border);
+  border-radius: var(--radius-field);
+  margin: var(--space-sm) 0;
+  padding: var(--space-sm-plus) var(--field-padding-x);
+  background-color: var(--field-bg);
+  color: var(--field-text);
+  font-size: var(--typography-small-size);
+  width: 100%;
+  transition: all var(--transition-fast);
+}
+
+.textFormField:focus {
+  outline: none;
+  border-color: var(--field-border-focus);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--dynamic-form-field-tertiary-500, var(--color-tertiary-500)) 15%, transparent);
+}
+
+.textFormField::placeholder {
+  color: var(--field-text-placeholder);
+}
+
+/* === Select Field (sh:in dropdown) === */
+.selectField {
+  box-shadow: none;
+  border: 1px solid var(--field-border);
+  border-radius: var(--radius-field);
+  margin: var(--space-sm) 0;
+  padding: var(--space-sm-plus) var(--field-padding-x);
+  background-color: var(--field-bg);
+  color: var(--field-text);
+  font-size: var(--typography-small-size);
+  width: 100%;
+  transition: all var(--transition-fast);
+  cursor: pointer;
+}
+
+.selectField:focus {
+  outline: none;
+  border-color: var(--field-border-focus);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--dynamic-form-field-tertiary-500, var(--color-tertiary-500)) 15%, transparent);
+}
+
+/* === Field Error === */
+.fieldError {
+  display: block;
+  width: 100%;
+  color: var(--intent-danger-text);
+  font-size: var(--typography-small-size);
+  margin-top: -0.25rem;
+  padding-bottom: var(--space-2xs);
+}
+
+/* === Date Form Field === */
+.dateFormField {
+  background-color: var(--field-bg);
+  border: 1px solid var(--field-border);
+  border-radius: var(--radius-field);
+  padding: var(--space-sm-plus) var(--field-padding-x);
+  color: var(--field-text);
+  font-size: var(--typography-small-size);
+  width: 100%;
+}
+
+.dateFormField:focus {
+  outline: none;
+  border-color: var(--field-border-focus);
+}
+
+/* === Info Icon (tooltip trigger) === */
+.infoIcon {
+  display: inline-flex;
+  align-items: center;
+  margin-left: var(--space-2xs);
+  color: var(--text-auxiliary);
+  cursor: help;
+  vertical-align: middle;
+  background: none;
+  border: none;
+  padding: 0;
+  line-height: 1;
+}
+
+.infoIcon:hover,
+.infoIcon:focus-visible {
+  color: var(--dynamic-form-field-tertiary-500, var(--color-tertiary-500));
+  outline: none;
+}
+
+/* === Narrowing Hint (shown when parent field can narrow this field's options) === */
+.narrowingHint {
+  display: block;
+  width: 100%;
+  color: var(--text-auxiliary);
+  font-size: var(--typography-small-size);
+  font-style: italic;
+  margin-bottom: var(--space-2xs);
+}
+
+/* === Tooltip Content (ensure it appears above form fields) === */
+.tooltipContent {
+  z-index: var(--layer-tooltip);
+}
+
+/* All tokens used above (--text-secondary, --text-auxiliary, --input-*,
+   --intent-danger-*) are semantic and auto-switch in dark mode. */
+

package/lib/esm/components/EditInstanceForms.d.ts

@@ -0,0 +1,15 @@
+import type { PropertyShapeWire, NodeShapeWire } from '@_linked/core/shapes/nodeShapeWire';
+import { type CodeUsageData, type PropertyUsageData } from '../shape/propertyVisibility.js';
+interface EditInstanceFormsProps {
+    of: Record<string, any>;
+    onSave?: (data: Record<string, any>) => Promise<void>;
+    onCancel?: () => void;
+    shape: NodeShapeWire;
+    properties: Record<string, PropertyShapeWire>;
+    allShapes?: Record<string, NodeShapeWire>;
+    projectId?: string;
+    propertyUsage?: Record<string, PropertyUsageData> | null;
+    codeUsage?: Record<string, CodeUsageData> | null;
+}
+declare function EditInstanceForms({ of, onSave, onCancel, shape, properties, allShapes, projectId, propertyUsage, codeUsage, }: EditInstanceFormsProps): import("react").JSX.Element;
+export default EditInstanceForms;