@wordpress/patterns 1.1.0

package/build-module/store/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createReduxStore","register","reducer","actions","STORE_NAME","selectors","storeConfig","store"],"sources":["@wordpress/patterns/src/store/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createReduxStore, register } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport reducer from './reducer';\nimport * as actions from './actions';\nimport { STORE_NAME } from './constants';\nimport * as selectors from './selectors';\n\n/**\n * Post editor data store configuration.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#registerStore\n *\n * @type {Object}\n */\nexport const storeConfig = {\n\treducer,\n\tselectors,\n\tactions,\n};\n\n/**\n * Store definition for the editor namespace.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore\n *\n * @type {Object}\n */\nexport const store = createReduxStore( STORE_NAME, {\n\t...storeConfig,\n} );\n\nregister( store );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,gBAAgB,EAAEC,QAAQ,QAAQ,iBAAiB;;AAE5D;AACA;AACA;AACA,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAO,KAAKC,OAAO,MAAM,WAAW;AACpC,SAASC,UAAU,QAAQ,aAAa;AACxC,OAAO,KAAKC,SAAS,MAAM,aAAa;;AAExC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAW,GAAG;EAC1BJ,OAAO;EACPG,SAAS;EACTF;AACD,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,KAAK,GAAGP,gBAAgB,CAAEI,UAAU,EAAE;EAClD,GAAGE;AACJ,CAAE,CAAC;AAEHL,QAAQ,CAAEM,KAAM,CAAC"}

package/build-module/store/reducer.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { combineReducers } from '@wordpress/data';
+export function isEditingPattern(state = {}, action) {
+  if (action?.type === 'SET_EDITING_PATTERN') {
+    return {
+      ...state,
+      [action.clientId]: action.isEditing
+    };
+  }
+  return state;
+}
+export default combineReducers({
+  isEditingPattern
+});
+//# sourceMappingURL=reducer.js.map

package/build-module/store/reducer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["combineReducers","isEditingPattern","state","action","type","clientId","isEditing"],"sources":["@wordpress/patterns/src/store/reducer.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { combineReducers } from '@wordpress/data';\n\nexport function isEditingPattern( state = {}, action ) {\n\tif ( action?.type === 'SET_EDITING_PATTERN' ) {\n\t\treturn {\n\t\t\t...state,\n\t\t\t[ action.clientId ]: action.isEditing,\n\t\t};\n\t}\n\n\treturn state;\n}\n\nexport default combineReducers( {\n\tisEditingPattern,\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,eAAe,QAAQ,iBAAiB;AAEjD,OAAO,SAASC,gBAAgBA,CAAEC,KAAK,GAAG,CAAC,CAAC,EAAEC,MAAM,EAAG;EACtD,IAAKA,MAAM,EAAEC,IAAI,KAAK,qBAAqB,EAAG;IAC7C,OAAO;MACN,GAAGF,KAAK;MACR,CAAEC,MAAM,CAACE,QAAQ,GAAIF,MAAM,CAACG;IAC7B,CAAC;EACF;EAEA,OAAOJ,KAAK;AACb;AAEA,eAAeF,eAAe,CAAE;EAC/BC;AACD,CAAE,CAAC"}

package/build-module/store/selectors.js

@@ -0,0 +1,11 @@
+/**
+ * Returns true if pattern is in the editing state.
+ *
+ * @param {Object} state    Global application state.
+ * @param {number} clientId the clientID of the block.
+ * @return {boolean} Whether the pattern is in the editing state.
+ */
+export function __experimentalIsEditingPattern(state, clientId) {
+  return state.isEditingPattern[clientId];
+}
+//# sourceMappingURL=selectors.js.map

package/build-module/store/selectors.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalIsEditingPattern","state","clientId","isEditingPattern"],"sources":["@wordpress/patterns/src/store/selectors.js"],"sourcesContent":["/**\n * Returns true if pattern is in the editing state.\n *\n * @param {Object} state    Global application state.\n * @param {number} clientId the clientID of the block.\n * @return {boolean} Whether the pattern is in the editing state.\n */\nexport function __experimentalIsEditingPattern( state, clientId ) {\n\treturn state.isEditingPattern[ clientId ];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,8BAA8BA,CAAEC,KAAK,EAAEC,QAAQ,EAAG;EACjE,OAAOD,KAAK,CAACE,gBAAgB,CAAED,QAAQ,CAAE;AAC1C"}

package/build-style/style-rtl.css

@@ -0,0 +1,108 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Shadows.
+ */
+/**
+ * Editor widths.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+:root {
+  --wp-admin-theme-color: #007cba;
+  --wp-admin-theme-color--rgb: 0, 124, 186;
+  --wp-admin-theme-color-darker-10: #006ba1;
+  --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
+  --wp-admin-theme-color-darker-20: #005a87;
+  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
+  --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
+}
+@media (min-resolution: 192dpi) {
+  :root {
+    --wp-admin-border-width-focus: 1.5px;
+  }
+}
+
+.patterns-menu-items__convert-modal {
+  z-index: 1000001;
+}

package/build-style/style.css

@@ -0,0 +1,108 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Shadows.
+ */
+/**
+ * Editor widths.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+:root {
+  --wp-admin-theme-color: #007cba;
+  --wp-admin-theme-color--rgb: 0, 124, 186;
+  --wp-admin-theme-color-darker-10: #006ba1;
+  --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
+  --wp-admin-theme-color-darker-20: #005a87;
+  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
+  --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
+}
+@media (min-resolution: 192dpi) {
+  :root {
+    --wp-admin-border-width-focus: 1.5px;
+  }
+}
+
+.patterns-menu-items__convert-modal {
+  z-index: 1000001;
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+	"name": "@wordpress/patterns",
+	"version": "1.1.0",
+	"description": "Management of user pattern editing.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"patterns"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/patterns/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/patterns"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=16.0.0",
+		"npm": ">=8 <9"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"sideEffects": [
+		"build-style/**",
+		"src/**/*.scss",
+		"{src,build,build-module}/{index.js,store/index.js,hooks/**}"
+	],
+	"dependencies": {
+		"@wordpress/block-editor": "^12.8.0",
+		"@wordpress/blocks": "^12.17.0",
+		"@wordpress/components": "^25.6.0",
+		"@wordpress/compose": "^6.17.0",
+		"@wordpress/core-data": "^6.17.0",
+		"@wordpress/data": "^9.10.0",
+		"@wordpress/element": "^5.17.0",
+		"@wordpress/i18n": "^4.40.0",
+		"@wordpress/icons": "^9.31.0",
+		"@wordpress/notices": "^4.8.0",
+		"@wordpress/private-apis": "^0.22.0",
+		"@wordpress/url": "^3.41.0"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"gitHead": "78a288d55b83a713b2f7d98d5a855c0771a2afc6"
+}

package/src/components/create-pattern-modal.js

@@ -0,0 +1,121 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Modal,
+	Button,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	ToggleControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState, useCallback } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+
+export const USER_PATTERN_CATEGORY = 'my-patterns';
+
+export const SYNC_TYPES = {
+	full: undefined,
+	unsynced: 'unsynced',
+};
+
+/**
+ * Internal dependencies
+ */
+import { store } from '../store';
+
+export default function CreatePatternModal( {
+	onSuccess,
+	onError,
+	clientIds,
+	onClose,
+	className = 'patterns-menu-items__convert-modal',
+} ) {
+	const [ syncType, setSyncType ] = useState( SYNC_TYPES.full );
+	const [ title, setTitle ] = useState( '' );
+	const { __experimentalCreatePattern: createPattern } = useDispatch( store );
+
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const onCreate = useCallback(
+		async function ( patternTitle, sync ) {
+			try {
+				const newPattern = await createPattern(
+					patternTitle,
+					sync,
+					clientIds
+				);
+				onSuccess( {
+					pattern: newPattern,
+					categoryId: USER_PATTERN_CATEGORY,
+				} );
+			} catch ( error ) {
+				createErrorNotice( error.message, {
+					type: 'snackbar',
+					id: 'convert-to-pattern-error',
+				} );
+				onError();
+			}
+		},
+		[ createPattern, clientIds, onSuccess, createErrorNotice, onError ]
+	);
+	return (
+		<Modal
+			title={ __( 'Create pattern' ) }
+			onRequestClose={ () => {
+				onClose();
+				setTitle( '' );
+			} }
+			overlayClassName={ className }
+		>
+			<form
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+					onCreate( title, syncType );
+					setTitle( '' );
+				} }
+			>
+				<VStack spacing="5">
+					<TextControl
+						__nextHasNoMarginBottom
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+						placeholder={ __( 'My pattern' ) }
+					/>
+
+					<ToggleControl
+						label={ __( 'Synced' ) }
+						help={ __(
+							'Editing the pattern will update it anywhere it is used.'
+						) }
+						checked={ ! syncType }
+						onChange={ () => {
+							setSyncType(
+								syncType === SYNC_TYPES.full
+									? SYNC_TYPES.unsynced
+									: SYNC_TYPES.full
+							);
+						} }
+					/>
+					<HStack justify="right">
+						<Button
+							variant="tertiary"
+							onClick={ () => {
+								onClose();
+								setTitle( '' );
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+
+						<Button variant="primary" type="submit">
+							{ __( 'Create' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}

package/src/components/index.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockSettingsMenuControls } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import PatternConvertButton from './pattern-convert-button';
+import PatternsManageButton from './patterns-manage-button';
+
+export default function PatternsMenuItems( { rootClientId } ) {
+	return (
+		<BlockSettingsMenuControls>
+			{ ( { selectedClientIds } ) => (
+				<>
+					<PatternConvertButton
+						clientIds={ selectedClientIds }
+						rootClientId={ rootClientId }
+					/>
+					{ selectedClientIds.length === 1 && (
+						<PatternsManageButton
+							clientId={ selectedClientIds[ 0 ] }
+						/>
+					) }
+				</>
+			) }
+		</BlockSettingsMenuControls>
+	);
+}

package/src/components/pattern-convert-button.js

@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies
+ */
+import { hasBlockSupport, isReusableBlock } from '@wordpress/blocks';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+import { MenuItem } from '@wordpress/components';
+import { symbol } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+/**
+ * Internal dependencies
+ */
+import CreatePatternModal from './create-pattern-modal';
+
+/**
+ * Menu control to convert block(s) to a pattern block.
+ *
+ * @param {Object}   props              Component props.
+ * @param {string[]} props.clientIds    Client ids of selected blocks.
+ * @param {string}   props.rootClientId ID of the currently selected top-level block.
+ * @return {import('@wordpress/element').WPComponent} The menu control or null.
+ */
+export default function PatternConvertButton( { clientIds, rootClientId } ) {
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const canConvert = useSelect(
+		( select ) => {
+			const { canUser } = select( coreStore );
+			const {
+				getBlocksByClientId,
+				canInsertBlockType,
+				getBlockRootClientId,
+			} = select( blockEditorStore );
+
+			const rootId =
+				rootClientId ||
+				( clientIds.length > 0
+					? getBlockRootClientId( clientIds[ 0 ] )
+					: undefined );
+
+			const blocks = getBlocksByClientId( clientIds ) ?? [];
+
+			const isReusable =
+				blocks.length === 1 &&
+				blocks[ 0 ] &&
+				isReusableBlock( blocks[ 0 ] ) &&
+				!! select( coreStore ).getEntityRecord(
+					'postType',
+					'wp_block',
+					blocks[ 0 ].attributes.ref
+				);
+
+			const _canConvert =
+				// Hide when this is already a synced pattern.
+				! isReusable &&
+				// Hide when patterns are disabled.
+				canInsertBlockType( 'core/block', rootId ) &&
+				blocks.every(
+					( block ) =>
+						// Guard against the case where a regular block has *just* been converted.
+						!! block &&
+						// Hide on invalid blocks.
+						block.isValid &&
+						// Hide when block doesn't support being made into a pattern.
+						hasBlockSupport( block.name, 'reusable', true )
+				) &&
+				// Hide when current doesn't have permission to do that.
+				!! canUser( 'create', 'blocks' );
+
+			return _canConvert;
+		},
+		[ clientIds, rootClientId ]
+	);
+
+	if ( ! canConvert ) {
+		return null;
+	}
+
+	const handleSuccess = ( { pattern } ) => {
+		createSuccessNotice(
+			pattern.wp_pattern_sync_status === 'unsynced'
+				? sprintf(
+						// translators: %s: the name the user has given to the pattern.
+						__( 'Unsynced Pattern created: %s' ),
+						pattern.title.raw
+				  )
+				: sprintf(
+						// translators: %s: the name the user has given to the pattern.
+						__( 'Synced Pattern created: %s' ),
+						pattern.title.raw
+				  ),
+			{
+				type: 'snackbar',
+				id: 'convert-to-pattern-success',
+			}
+		);
+		setIsModalOpen( false );
+	};
+	return (
+		<>
+			<MenuItem icon={ symbol } onClick={ () => setIsModalOpen( true ) }>
+				{ __( 'Create pattern' ) }
+			</MenuItem>
+			{ isModalOpen && (
+				<CreatePatternModal
+					clientIds={ clientIds }
+					onSuccess={ ( pattern ) => {
+						handleSuccess( pattern );
+					} }
+					onError={ () => {
+						setIsModalOpen( false );
+					} }
+					onClose={ () => {
+						setIsModalOpen( false );
+					} }
+				/>
+			) }
+		</>
+	);
+}

package/src/components/patterns-manage-button.js

@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { isReusableBlock } from '@wordpress/blocks';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { addQueryArgs } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../store';
+
+function PatternsManageButton( { clientId } ) {
+	const { canRemove, isVisible, innerBlockCount, managePatternsUrl } =
+		useSelect(
+			( select ) => {
+				const { getBlock, canRemoveBlock, getBlockCount, getSettings } =
+					select( blockEditorStore );
+				const { canUser } = select( coreStore );
+				const reusableBlock = getBlock( clientId );
+				const isBlockTheme = getSettings().__unstableIsBlockBasedTheme;
+
+				return {
+					canRemove: canRemoveBlock( clientId ),
+					isVisible:
+						!! reusableBlock &&
+						isReusableBlock( reusableBlock ) &&
+						!! canUser(
+							'update',
+							'blocks',
+							reusableBlock.attributes.ref
+						),
+					innerBlockCount: getBlockCount( clientId ),
+					// The site editor and templates both check whether the user
+					// has edit_theme_options capabilities. We can leverage that here
+					// and omit the manage patterns link if the user can't access it.
+					managePatternsUrl:
+						isBlockTheme && canUser( 'read', 'templates' )
+							? addQueryArgs( 'site-editor.php', {
+									path: '/patterns',
+							  } )
+							: addQueryArgs( 'edit.php', {
+									post_type: 'wp_block',
+							  } ),
+				};
+			},
+			[ clientId ]
+		);
+
+	const { __experimentalConvertSyncedPatternToStatic: convertBlockToStatic } =
+		useDispatch( editorStore );
+
+	if ( ! isVisible ) {
+		return null;
+	}
+
+	return (
+		<>
+			<MenuItem href={ managePatternsUrl }>
+				{ __( 'Manage patterns' ) }
+			</MenuItem>
+			{ canRemove && (
+				<MenuItem onClick={ () => convertBlockToStatic( clientId ) }>
+					{ innerBlockCount > 1
+						? __( 'Detach patterns' )
+						: __( 'Detach pattern' ) }
+				</MenuItem>
+			) }
+		</>
+	);
+}
+
+export default PatternsManageButton;

package/src/components/style.scss

@@ -0,0 +1,3 @@
+.patterns-menu-items__convert-modal {
+	z-index: z-index(".patterns-menu-items__convert-modal");
+}

package/src/index.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import './store';
+
+export * from './private-apis';

package/src/index.native.js

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import './store';
+import { lock } from './lock-unlock';
+
+export const privateApis = {};
+lock( privateApis, {
+	CreatePatternModal: () => null,
+	PatternsMenuItems: () => null,
+} );