diff --git a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/form/ReservedProperties.java b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/form/ReservedProperties.java
index 34844e24b5..440555e8e6 100644
--- a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/form/ReservedProperties.java
+++ b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/form/ReservedProperties.java
@@ -162,6 +162,7 @@ private ReservedProperties() {
     public static final String FD_ENABLE_AUTO_SAVE = "fd:enableAutoSave";
     public static final String FD_AUTO_SAVE_STRATEGY_TYPE = "fd:autoSaveStrategyType";
     public static final String FD_AUTO_SAVE_INTERVAL = "fd:autoSaveInterval";
+    public static final String FD_DIALOG_LABEL = "fd:dialogLabel";
 
     public static final String FD_XFA_SCRIPTS = "fd:xfaScripts";
 
diff --git a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/ScribbleImpl.java b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/ScribbleImpl.java
new file mode 100644
index 0000000000..f2ee578b57
--- /dev/null
+++ b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/ScribbleImpl.java
@@ -0,0 +1,73 @@
+/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ ~ Copyright 2025 Adobe
+ ~
+ ~ Licensed 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.
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+
+package com.adobe.cq.forms.core.components.internal.models.v1.form;
+
+import java.util.Map;
+
+import org.apache.sling.api.SlingHttpServletRequest;
+import org.apache.sling.api.resource.Resource;
+import org.apache.sling.models.annotations.Default;
+import org.apache.sling.models.annotations.Exporter;
+import org.apache.sling.models.annotations.Model;
+import org.apache.sling.models.annotations.injectorspecific.InjectionStrategy;
+import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;
+import org.jetbrains.annotations.NotNull;
+
+import com.adobe.cq.export.json.ComponentExporter;
+import com.adobe.cq.export.json.ExporterConstants;
+import com.adobe.cq.forms.core.components.internal.form.ReservedProperties;
+import com.adobe.cq.forms.core.components.models.form.Scribble;
+import com.adobe.cq.forms.core.components.util.AbstractFieldImpl;
+import com.fasterxml.jackson.annotation.JsonIgnore;
+import com.fasterxml.jackson.annotation.JsonInclude;
+
+@Model(
+    adaptables = { SlingHttpServletRequest.class, Resource.class },
+    adapters = { Scribble.class, ComponentExporter.class },
+    resourceType = "core/fd/components/form/scribble/v1/scribble")
+@Exporter(
+    name = ExporterConstants.SLING_MODEL_EXPORTER_NAME,
+    extensions = ExporterConstants.SLING_MODEL_EXTENSION)
+public class ScribbleImpl extends AbstractFieldImpl implements Scribble {
+
+    @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL)
+    @JsonInclude(JsonInclude.Include.NON_EMPTY)
+    private String value;
+
+    @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL, name = ReservedProperties.FD_DIALOG_LABEL)
+    @Default(values = Scribble.DEFAULT_DIALOG_LABEL)
+    protected String dialogLabel;
+
+    @Override
+    public String getValue() {
+        return value;
+    }
+
+    @JsonIgnore
+    public String getDialogLabel() {
+        return dialogLabel;
+    }
+
+    @Override
+    public @NotNull Map<String, Object> getProperties() {
+        Map<String, Object> customProperties = super.getProperties();
+        if (getDialogLabel() != null)
+            customProperties.put(ReservedProperties.FD_DIALOG_LABEL, getDialogLabel());
+        return customProperties;
+    }
+
+}
diff --git a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/Scribble.java b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/Scribble.java
new file mode 100644
index 0000000000..82938af3c7
--- /dev/null
+++ b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/Scribble.java
@@ -0,0 +1,39 @@
+/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ ~ Copyright 2024 Adobe
+ ~
+ ~ Licensed 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.
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+
+package com.adobe.cq.forms.core.components.models.form;
+
+import org.osgi.annotation.versioning.ConsumerType;
+
+/**
+ * Defines the form Scribble Sling Model used for the Scribble component.
+ *
+ * @since com.adobe.cq.forms.core.components.models.form 5.11.0
+ */
+@ConsumerType
+public interface Scribble extends Field {
+
+    String DEFAULT_DIALOG_LABEL = "Please sign here";
+
+    /**
+     * Returns the base64 encoded string of the scribble.
+     *
+     * @return Base64 encoded string representing the scribble
+     * @since com.adobe.cq.forms.core.components.models.form 5.11.0
+     */
+    String getValue();
+
+}
diff --git a/bundles/af-core/src/test/resources/form/scribble/exporter-scribble.json b/bundles/af-core/src/test/resources/form/scribble/exporter-scribble.json
new file mode 100644
index 0000000000..853f822f58
--- /dev/null
+++ b/bundles/af-core/src/test/resources/form/scribble/exporter-scribble.json
@@ -0,0 +1,22 @@
+{
+    "id": "scribble-178a5c65c2",
+    "fieldType": "text-input",
+    "name": "scribble1710484027357",
+    "value": "",
+    "type": "string",
+    "label": {
+    "value": "Scribble"
+    },
+    "events": {
+    "custom:setProperty": [
+    "$event.payload"
+    ]
+    },
+    "properties": {
+    "fd:dor": {
+    "dorExclusion": false
+    },
+    "fd:path": "/content/forms/af/scribbletest/jcr:content/guideContainer/scribble"
+    },
+    ":type": "forms-components-examples/components/form/scribble"
+}
\ No newline at end of file
diff --git a/examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/scribble/.content.xml b/examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/scribble/.content.xml
new file mode 100644
index 0000000000..7c7c367660
--- /dev/null
+++ b/examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/scribble/.content.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+  jcr:primaryType="cq:Component"
+  jcr:title="Adaptive Form Scribble"
+  jcr:description="Add a field to capture scribble signature."
+  sling:resourceSuperType="core/fd/components/form/scribble/v1/scribble"
+  componentGroup="Core Components Examples - Adaptive Form"/>
diff --git a/examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/scribble/_cq_template.xml b/examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/scribble/_cq_template.xml
new file mode 100644
index 0000000000..d660889a7c
--- /dev/null
+++ b/examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/scribble/_cq_template.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:fd="http://www.adobe.com/aemfd/fd/1.0"
+    jcr:primaryType="nt:unstructured"
+    jcr:title="Scribble"
+    fd:dialogLabel="Please sign here"
+    placeholder="Type Your Signature Here"
+    fieldType="scribble"/>
diff --git a/examples/ui.content/src/main/content/jcr_root/content/core-components-examples/library/adaptive-form/scribble/.content.xml b/examples/ui.content/src/main/content/jcr_root/content/core-components-examples/library/adaptive-form/scribble/.content.xml
new file mode 100644
index 0000000000..4fcce7df95
--- /dev/null
+++ b/examples/ui.content/src/main/content/jcr_root/content/core-components-examples/library/adaptive-form/scribble/.content.xml
@@ -0,0 +1,156 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:fd="http://www.adobe.com/aemfd/fd/1.0"
+jcr:primaryType="cq:Page">
+<jcr:content
+cq:lastModified="{Date}2025-05-13T10:52:13.652+05:30"
+cq:lastModifiedBy="admin"
+cq:tags="[]"
+cq:template="/conf/core-components-examples/settings/wcm/templates/content-page"
+jcr:description="Text Input"
+jcr:primaryType="cq:PageContent"
+jcr:title="Text Input"
+sling:resourceType="forms-components-examples/components/page">
+<root
+jcr:primaryType="nt:unstructured"
+sling:resourceType="wcm/foundation/components/responsivegrid">
+<responsivegrid
+jcr:primaryType="nt:unstructured"
+sling:resourceType="wcm/foundation/components/responsivegrid">
+<text_1740702241
+cq:styleIds="[1644862132301]"
+jcr:created="{Date}2019-02-15T19:05:53.032+01:00"
+jcr:createdBy="admin"
+jcr:lastModified="{Date}2025-05-13T10:46:48.636+05:30"
+jcr:lastModifiedBy="admin"
+jcr:primaryType="nt:unstructured"
+sling:resourceType="core/wcm/components/text/v2/text"
+text="&lt;h1>&lt;sub>Scribblev1&lt;/sub>&lt;/h1>&#xd;&#xa;"
+textIsRich="true"/>
+<text
+cq:styleIds="[1544762734201]"
+jcr:created="{Date}2018-12-06T19:11:23.947+01:00"
+jcr:createdBy="admin"
+jcr:lastModified="{Date}2025-05-13T10:51:01.755+05:30"
+jcr:lastModifiedBy="admin"
+jcr:primaryType="nt:unstructured"
+sling:resourceType="core/wcm/components/text/v2/text"
+text="&lt;p>A Scribble component&amp;nbsp; allows users to manually draw or input their signature using a mouse. This component is commonly used in forms that require user authentication, acknowledgment, or consent.&lt;/p>&#xd;&#xa;&lt;p>The Scribble component can be placed within a form and is typically accompanied by a label that clearly indicates its purpose. It captures freehand input as image data and can be stored as a base64 image or transmitted as part of the form data.&lt;/p>&#xd;&#xa;"
+textIsRich="true"/>
+<teaser
+cq:styleIds="[1550165685463]"
+jcr:created="{Date}2019-02-14T16:41:54.952+01:00"
+jcr:createdBy="admin"
+jcr:description="&lt;p>GitHub&lt;/p>&#xd;&#xa;"
+jcr:lastModified="{Date}2025-05-13T10:52:13.639+05:30"
+jcr:lastModifiedBy="admin"
+jcr:primaryType="nt:unstructured"
+jcr:title="Technical Documentation"
+sling:resourceType="core-components-examples/components/teaser"
+actionsEnabled="false"
+altValueFromDAM="true"
+descriptionFromPage="false"
+fileReference="/content/dam/core-components-examples/library/github-logo.svg"
+imageFromPageImage="false"
+isDecorative="false"
+linkTarget="_self"
+linkURL="https://github.com/adobe/aem-core-forms-components/tree/master/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble"
+textIsRich="true"
+titleFromPage="false"/>
+<title_865328580
+cq:styleIds="[1544759664489]"
+jcr:created="{Date}2018-12-06T19:22:23.729+01:00"
+jcr:createdBy="admin"
+jcr:lastModified="{Date}2018-12-06T19:23:25.116+01:00"
+jcr:lastModifiedBy="admin"
+jcr:primaryType="nt:unstructured"
+jcr:title="Examples"
+sling:resourceType="core/wcm/components/title/v2/title"
+type="h2"/>
+<title_290384408
+cq:styleIds="[1544759676459]"
+jcr:created="{Date}2018-12-06T19:22:48.620+01:00"
+jcr:createdBy="admin"
+jcr:lastModified="{Date}2019-05-22T11:01:40.926+03:00"
+jcr:lastModifiedBy="admin"
+jcr:primaryType="nt:unstructured"
+jcr:title="Standard"
+sling:resourceType="core/wcm/components/title/v2/title"
+type="h3"/>
+<text_1337506761
+jcr:created="{Date}2018-12-06T19:23:41.968+01:00"
+jcr:createdBy="admin"
+jcr:lastModified="{Date}2019-05-22T11:26:32.604+03:00"
+jcr:lastModifiedBy="admin"
+jcr:primaryType="nt:unstructured"
+sling:resourceType="core/wcm/components/text/v2/text"
+text="&lt;p>The component, simply displaying placeholder data.&lt;/p>"
+textIsRich="true"/>
+<demo
+jcr:created="{Date}2018-12-07T12:55:03.496+01:00"
+jcr:createdBy="admin"
+jcr:lastModified="{Date}2018-12-07T12:55:03.496+01:00"
+jcr:lastModifiedBy="admin"
+jcr:primaryType="nt:unstructured"
+sling:resourceType="forms-components-examples/components/demo">
+<component
+jcr:primaryType="nt:unstructured"
+sling:resourceType="forms-components-examples/components/demo/component">
+<guideContainer
+fd:version="2.1"
+jcr:primaryType="nt:unstructured"
+sling:resourceType="forms-components-examples/components/form/container"
+fieldType="form">
+<container
+jcr:primaryType="nt:unstructured"
+sling:resourceType="forms-components-examples/components/demo/component">
+<scribble
+jcr:created="{Date}2025-05-13T10:42:40.868+05:30"
+jcr:createdBy="admin"
+jcr:lastModified="{Date}2025-05-13T10:42:40.868+05:30"
+jcr:lastModifiedBy="admin"
+jcr:primaryType="nt:unstructured"
+jcr:title="Scribble"
+sling:resourceType="forms-components-examples/components/form/scribble"
+fieldType="scribble"
+name="scribble1747113160904"/>
+<textinput_demo
+jcr:created="{Date}2019-03-06T14:11:01.819+01:00"
+jcr:createdBy="admin"
+jcr:lastModified="{Date}2019-05-21T18:59:35.605+03:00"
+jcr:lastModifiedBy="admin"
+jcr:primaryType="nt:unstructured"
+jcr:title="Text Input"
+sling:resourceType="forms-components-examples/components/form/textinput"
+description="&lt;p>This is a long description.&lt;/p>"
+fieldType="text-input"
+name="textinput_demo1747112925773"
+placeholder="Enter text here"
+tooltip="&lt;p>This is a short description.&lt;/p>"
+tooltipVisible="true"/>
+</container>
+</guideContainer>
+</component>
+<info
+jcr:primaryType="nt:unstructured"
+sling:resourceType="core-components-examples/components/tabs">
+<properties
+cq:panelTitle="Properties"
+jcr:primaryType="nt:unstructured"
+sling:resourceType="core-components-examples/components/demo/properties"
+reference="../../component/guideContainer/container"/>
+<markup
+cq:panelTitle="Markup"
+jcr:primaryType="nt:unstructured"
+sling:resourceType="core-components-examples/components/demo/markup"
+reference="../../component/guideContainer/container"/>
+<json
+cq:panelTitle="JSON"
+jcr:primaryType="nt:unstructured"
+sling:resourceType="core-components-examples/components/demo/json"
+reference="../../component/guideContainer/container"/>
+</info>
+</demo>
+</responsivegrid>
+</root>
+</jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/scribble/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/scribble/.content.xml
new file mode 100644
index 0000000000..9d97f4c991
--- /dev/null
+++ b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/scribble/.content.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:rep="internal"
+    jcr:mixinTypes="[rep:AccessControllable]"
+    jcr:primaryType="sling:Folder"
+    hidden="true"/>
\ No newline at end of file
diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/scribble/basic/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/scribble/basic/.content.xml
new file mode 100644
index 0000000000..2bcd5b70da
--- /dev/null
+++ b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/scribble/basic/.content.xml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:fd="http://www.adobe.com/aemfd/fd/1.0"
+jcr:primaryType="cq:Page">
+<jcr:content
+cq:deviceGroups="[/etc/mobile/groups/responsive]"
+cq:lastModified="{Date}2025-05-12T11:21:33.952+05:30"
+cq:lastModifiedBy="admin"
+cq:template="/conf/core-components-examples/settings/wcm/templates/af-blank-v2"
+fd:ignoreTranslationInvalidation="{Boolean}true"
+jcr:language="en"
+jcr:primaryType="cq:PageContent"
+jcr:title="Scribble Form"
+sling:configRef="/conf/forms/scribble-form/"
+sling:resourceType="forms-components-examples/components/page">
+<guideContainer
+fd:version="2.1"
+jcr:primaryType="nt:unstructured"
+sling:resourceType="forms-components-examples/components/form/container"
+dorType="none"
+fieldType="form"
+thankYouOption="page"
+themeRef="/libs/fd/af/themes/canvas"
+title="Scribble Form">
+<scribble_1246399518
+jcr:created="{Date}2025-05-12T11:16:08.171+05:30"
+jcr:createdBy="admin"
+jcr:lastModified="{Date}2025-05-12T11:16:39.856+05:30"
+jcr:lastModifiedBy="admin"
+jcr:primaryType="nt:unstructured"
+jcr:title="Scribble"
+sling:resourceType="forms-components-examples/components/form/scribble"
+description="&lt;p>This is long description&lt;/p>&#xd;&#xa;"
+enabled="{Boolean}true"
+fieldType="scribble"
+hideTitle="false"
+name="scribble_12463995181747028768202"
+textIsRich="[true,true,true]"
+tooltip="&lt;p>This is short description&lt;/p>&#xd;&#xa;"
+tooltipVisible="true"
+unboundFormElement="{Boolean}false"
+visible="{Boolean}true"/>
+</guideContainer>
+</jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all/.content.xml
index 0ef50cf14f..37001a511d 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all/.content.xml
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all/.content.xml
@@ -5,4 +5,4 @@
     cssProcessor="[default:none,min:none]"
     jsProcessor="[default:none,min:none]"
     categories="[core.forms.components.runtime.all]"
-    embed="[core.forms.components.runtime.base,core.forms.components.container.v2.runtime,core.forms.components.datePicker.v1.runtime,core.forms.components.textinput.v1.runtime,core.forms.components.numberinput.v1.runtime,core.forms.components.panelcontainer.v1.runtime,core.forms.components.radiobutton.v1.runtime,core.forms.components.text.v1.runtime,core.forms.components.checkboxgroup.v1.runtime,core.forms.components.button.v1.runtime,core.forms.components.image.v1.runtime,core.forms.components.dropdown.v1.runtime,core.forms.components.fileinput.v3.runtime,core.forms.components.accordion.v1.runtime,core.forms.components.tabs.v1.runtime,core.forms.components.wizard.v1.runtime,core.forms.components.verticaltabs.v1.runtime,core.forms.components.recaptcha.v1.runtime,core.forms.components.checkbox.v1.runtime,core.forms.components.fragment.v1.runtime,core.forms.components.switch.v1.runtime,core.forms.components.termsandconditions.v1.runtime, core.forms.components.hcaptcha.v1.runtime,core.forms.components.review.v1.runtime, core.forms.components.turnstile.v1.runtime]"/>
+    embed="[core.forms.components.runtime.base,core.forms.components.container.v2.runtime,core.forms.components.datePicker.v1.runtime,core.forms.components.textinput.v1.runtime,core.forms.components.numberinput.v1.runtime,core.forms.components.panelcontainer.v1.runtime,core.forms.components.radiobutton.v1.runtime,core.forms.components.text.v1.runtime,core.forms.components.checkboxgroup.v1.runtime,core.forms.components.button.v1.runtime,core.forms.components.image.v1.runtime,core.forms.components.dropdown.v1.runtime,core.forms.components.fileinput.v3.runtime,core.forms.components.accordion.v1.runtime,core.forms.components.tabs.v1.runtime,core.forms.components.wizard.v1.runtime,core.forms.components.verticaltabs.v1.runtime,core.forms.components.recaptcha.v1.runtime,core.forms.components.checkbox.v1.runtime,core.forms.components.fragment.v1.runtime,core.forms.components.switch.v1.runtime,core.forms.components.termsandconditions.v1.runtime, core.forms.components.hcaptcha.v1.runtime,core.forms.components.review.v1.runtime, core.forms.components.turnstile.v1.runtime,core.forms.components.scribble.v1.runtime]"/>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/.content.xml
new file mode 100644
index 0000000000..491392d539
--- /dev/null
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/.content.xml
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="sling:Folder"/>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/.content.xml
new file mode 100644
index 0000000000..84e5adcf4a
--- /dev/null
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/.content.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+    jcr:primaryType="nt:unstructured">
+
+</jcr:root>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/.content.xml
new file mode 100644
index 0000000000..be8c13a283
--- /dev/null
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/.content.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    cq:icon="abc"
+    jcr:description="Add a field to capture scribble signature."
+    jcr:primaryType="cq:Component"
+    jcr:title="Adaptive Form Scribble (v1)"
+    sling:resourceSuperType="core/fd/components/form/base/v1/base"
+    componentGroup=".core-adaptiveform"/>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/README.md b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/README.md
new file mode 100644
index 0000000000..4cbc5f6baa
--- /dev/null
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/README.md
@@ -0,0 +1,102 @@
+<!--
+Copyright 2025 Adobe
+
+Licensed 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.
+-->
+Adaptive Form Scribble (v1)
+====
+Adaptive Form Scribble field component written in HTL.
+
+## Features
+
+* Provides the following type of input:
+  * text
+  * textarea
+* Custom constraint messages for the above types
+* Styles
+* Allows replacing this component with other component (as mentioned below).
+
+### Use Object
+The Form Text component uses the `com.adobe.cq.forms.core.components.models.form.Scribble` Sling Model for its Use-object.
+
+### Edit Dialog Properties
+The following properties are written to JCR for this Form Text component and are expected to be available as `Resource` properties:
+
+1. `./jcr:title` - defines the label to use for this field
+2. `./hideTitle` - if set to `true`, the label of this field will be hidden
+3. `./name` - defines the name of the field, which will be submitted with the form data
+4. `./description` - defines a help message that can be rendered in the field as a hint for the user
+5. `./required` - if set to `true`, this field will be marked as required, not allowing the form to be submitted until the field has a value
+6. `./requiredMessage` - defines the message displayed as tooltip when submitting the form if the value is left empty
+
+## Client Libraries
+The component provides a `core.forms.components.scribble.v1.runtime` client library category that contains the Javascript runtime for the component. 
+It should be added to a relevant site client library using the `embed` property.
+
+It also provides a `core.forms.components.scribble.v1.editor` editor client library category that includes
+JavaScript handling for dialog interaction. It is already included by its edit dialog.
+
+## BEM Description
+```
+BLOCK cmp-adaptiveform-scribble
+    ELEMENT cmp-adaptiveform-scribble__label-container
+    ELEMENT cmp-adaptiveform-scribble__canvas-signed-container
+        ELEMENT cmp-adaptiveform-scribble__canvas-signed-image
+    ELEMENT cmp-adaptiveform-scribble__container
+        ELEMENT cmp-adaptiveform-scribble__header
+        ELEMENT cmp-adaptiveform-scribble__content
+            ELEMENT cmp-adaptiveform-scribble__canvases
+                ELEMENT cmp-adaptiveform-scribble__signcanvases
+                    ELEMENT cmp-adaptiveform-scribble__canvas
+                    ELEMENT cmp-adaptiveform-scribble__keyboard-sign-box
+                ELEMENT cmp-adaptiveform-scribble__geocanvas
+            ELEMENT cmp-adaptiveform-scribble__controlpanel
+                ELEMENT cmp-adaptiveform-scribble__controls
+                    ELEMENT cmp-adaptiveform-scribble__control-brush
+                        MODIFIER cmp-adaptiveform-scribble__button
+                    ELEMENT cmp-adaptiveform-scribble__brushlist
+                    ELEMENT cmp-adaptiveform-scribble__control-clear
+                        MODIFIER cmp-adaptiveform-scribble__button
+                    ELEMENT cmp-adaptiveform-scribble__control-geo
+                        MODIFIER cmp-adaptiveform-scribble__button
+                    ELEMENT cmp-adaptiveform-scribble__control-text
+                        MODIFIER cmp-adaptiveform-scribble__button
+                    ELEMENT cmp-adaptiveform-scribble__control-message
+                ELEMENT cmp-adaptiveform-scribble__controlpanel__controls
+                    ELEMENT cmp-adaptiveform-scribble__close-button
+                    ELEMENT cmp-adaptiveform-scribble__save-button
+        ELEMENT cmp-adaptiveform-scribble__clearsign-container
+            ELEMENT cmp-adaptiveform-scribble__clearsign-title
+            ELEMENT cmp-adaptiveform-scribble__clearsign-content
+                ELEMENT cmp-adaptiveform-scribble__clearsign-message
+                ELEMENT cmp-adaptiveform-scribble__clearsign-panel
+                    ELEMENT cmp-adaptiveform-scribble__button--secondary
+                    ELEMENT cmp-adaptiveform-scribble__button--primary
+```
+
+### Note
+By placing the class names `cmp-adaptiveform-scribble__label` and `cmp-adaptiveform-scribble__questionmark` within the `cmp-adaptiveform-scribble__label-container` class, you create a logical grouping of the label and question mark elements. This approach simplifies the process of maintaining a consistent styling for both elements.
+
+## JavaScript Data Attribute Bindings
+
+The following attributes must be added for the initialization of the text-input component in the form view:  
+ 1. `data-cmp-is="adaptiveFormScribble"`
+ 2. `data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"`
+
+
+The following are optional attributes that can be added to the component in the form view:
+1. `data-cmp-valid` having a boolean value to indicate whether the field is currently valid or not
+2. `data-cmp-required` having a boolean value to indicate whether the field is currently required or not
+3. `data-cmp-active` having a boolean value to indicate whether the field is currently active or not 
+4. `data-cmp-visible` having a boolean value to indicate whether the field is currently visible or not
+5. `data-cmp-enabled` having a boolean value to indicate whether the field is currently enabled or not
\ No newline at end of file
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/_cq_design_dialog/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/_cq_design_dialog/.content.xml
new file mode 100644
index 0000000000..48c9812bd7
--- /dev/null
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/_cq_design_dialog/.content.xml
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  ~ Copyright 2025 Adobe
+  ~
+  ~ Licensed 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.
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
+          xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
+          xmlns:cq="http://www.day.com/jcr/cq/1.0"
+          xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+    jcr:primaryType="nt:unstructured"
+    jcr:title="Adaptive Form Scribble field"
+    sling:resourceType="cq/gui/components/authoring/dialog"
+    trackingFeature="core-components:design-dialog:adaptiveform-scribble:v1">
+    <content
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="granite/ui/components/coral/foundation/container">
+        <items jcr:primaryType="nt:unstructured">
+            <tabs
+                    jcr:primaryType="nt:unstructured"
+                    sling:resourceType="granite/ui/components/coral/foundation/tabs"
+                    maximized="{Boolean}true">
+                <items jcr:primaryType="nt:unstructured">
+                    <formats
+                            jcr:primaryType="nt:unstructured"
+                            jcr:title="Formats"
+                            sling:resourceType="granite/ui/components/coral/foundation/container"
+                            margin="{Boolean}true">
+                        <items jcr:primaryType="nt:unstructured">
+                            <column
+                                    jcr:primaryType="nt:unstructured"
+                                    sling:resourceType="granite/ui/components/coral/foundation/container">
+                                <items jcr:primaryType="nt:unstructured">
+                                    <customFormats
+                                        jcr:primaryType="nt:unstructured"
+                                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
+                                        fieldDescription="The scribble formats that are allowed to be selected by an author."
+                                        fieldLabel="Custom Formats"
+                                        composite="true"
+                                        name="./allowedCustomFormats">
+                                        <field
+                                            jcr:primaryType="nt:unstructured"
+                                            sling:resourceType = "granite/ui/components/coral/foundation/container"
+                                            name = "./allowedCustomFormats">
+                                            <items jcr:primaryType="nt:unstructured">
+                                                <customFormatKey
+                                                    jcr:primaryType="nt:unstructured"
+                                                    fieldDescription="The scribble format that will be displayed in formatter dropdown in dialog."
+                                                    fieldLabel="Custom Format Key"
+                                                    sling:resourceType = "granite/ui/components/coral/foundation/form/textfield"
+                                                    name = "customFormatKey"/>
+                                                <customFormatExpression
+                                                    jcr:primaryType="nt:unstructured"
+                                                    fieldDescription="The scribble format in unicode which will be used in runtime."
+                                                    fieldLabel="Custom Format Expression"
+                                                    sling:resourceType = "granite/ui/components/coral/foundation/form/textfield"
+                                                    name = "customFormatValue"/>
+                                            </items>
+                                        </field>
+                                    </customFormats>
+                                </items>
+                            </column>
+                        </items>
+                    </formats>
+                </items>
+            </tabs>
+        </items>
+    </content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/_cq_dialog/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/_cq_dialog/.content.xml
new file mode 100644
index 0000000000..e57d1bc9e4
--- /dev/null
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/_cq_dialog/.content.xml
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  ~ Copyright 2025 Adobe
+  ~
+  ~ Licensed 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.
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
+          xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
+          xmlns:cq="http://www.day.com/jcr/cq/1.0"
+          xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+    jcr:primaryType="nt:unstructured"
+    jcr:title="Adaptive Form Scribble field"
+    sling:resourceType="cq/gui/components/authoring/dialog"
+    extraClientlibs="[core.forms.components.scribble.v1.editor]"
+    helpPath="https://www.adobe.com/go/aem_af_cmp_scribble_v1"
+    trackingFeature="core-components:adaptiveform-scribble:v1">
+    <content
+        granite:class="cmp-adaptiveform-scribble__editdialog"
+        jcr:primaryType="nt:unstructured"
+        jcr:title="Adaptive Form Scribble"
+        sling:resourceType="granite/ui/components/coral/foundation/container">
+        <items jcr:primaryType="nt:unstructured">
+            <tabs
+                  jcr:primaryType="nt:unstructured"
+                  sling:resourceType="granite/ui/components/coral/foundation/tabs"
+                  maximized="{Boolean}true">
+                <items jcr:primaryType="nt:unstructured">
+                    <basic
+                            jcr:primaryType="nt:unstructured"
+                            jcr:title="Basic"
+                            sling:resourceType="granite/ui/components/coral/foundation/container">
+                        <items jcr:primaryType="nt:unstructured">
+                            <columns
+                                    jcr:primaryType="nt:unstructured"
+                                    sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
+                                    margin="{Boolean}true">
+                                <items jcr:primaryType="nt:unstructured">
+                                    <column
+                                            jcr:primaryType="nt:unstructured"
+                                            sling:resourceType="granite/ui/components/coral/foundation/container">
+                                        <items jcr:primaryType="nt:unstructured">
+                                            <readonly
+                                                    jcr:primaryType="nt:unstructured"
+                                                    sling:hideResource="{Boolean}true" />
+                                            <!-- <placeholder
+                                                    jcr:primaryType="nt:unstructured"
+                                                    sling:hideResource="{Boolean}true" /> -->
+                                            <dialogLabel
+                                                     jcr:primaryType="nt:unstructured"
+                                                     sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
+                                                     fieldLabel="Signature Dialog Title"
+                                                     fieldDescription="Sets the title displayed at the top of the signature capture dialog. This text guides the user when they are prompted to sign. Example: 'Please sign here'."
+                                                     name="./fd:dialogLabel" />
+                                        </items>
+                                    </column>
+                                </items>
+                            </columns>
+                        </items>
+                    </basic>
+                    <validation
+                            jcr:primaryType="nt:unstructured"
+                            sling:resourceType="granite/ui/components/coral/foundation/container">
+                        <items jcr:primaryType="nt:unstructured"/>
+                    </validation>
+                    <help
+                            jcr:primaryType="nt:unstructured"
+                            jcr:title="Help Content"
+                            sling:resourceType="granite/ui/components/coral/foundation/container">
+                        <items jcr:primaryType="nt:unstructured"/>
+                    </help>
+                    <accessibility
+                            jcr:primaryType="nt:unstructured"
+                            jcr:title="Accessibility"
+                            sling:resourceType="granite/ui/components/coral/foundation/container">
+                        <items jcr:primaryType="nt:unstructured"/>
+                    </accessibility>
+                </items>
+            </tabs>
+        </items>
+    </content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/_cq_template.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/_cq_template.xml
new file mode 100644
index 0000000000..366a2361f6
--- /dev/null
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/_cq_template.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
+    jcr:primaryType="nt:unstructured"
+    jcr:title="Scribble"
+    fieldType="text-input"/>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/.content.xml
new file mode 100644
index 0000000000..491392d539
--- /dev/null
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/.content.xml
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="sling:Folder"/>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/site/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/site/.content.xml
new file mode 100644
index 0000000000..3121bd86f3
--- /dev/null
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/site/.content.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="cq:ClientLibraryFolder"
+    allowProxy="{Boolean}true"
+    categories="[core.forms.components.scribble.v1.runtime]"
+    dependencies="[core.forms.components.runtime.base,core.forms.components.container.v2.runtime]"/>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/site/css.txt b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/site/css.txt
new file mode 100644
index 0000000000..24d3309e2d
--- /dev/null
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/site/css.txt
@@ -0,0 +1,18 @@
+###############################################################################
+# Copyright 2025 Adobe
+#
+# Licensed 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.
+###############################################################################
+
+#base=css
+scribbleview.css
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/site/css/scribbleview.css b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/site/css/scribbleview.css
new file mode 100644
index 0000000000..92f4ae37ca
--- /dev/null
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/site/css/scribbleview.css
@@ -0,0 +1,40 @@
+/*******************************************************************************
+ * Copyright 2024 Adobe
+ *
+ * Licensed 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.
+ ******************************************************************************/
+
+.cmp-adaptiveform-scribble__widget {
+
+}
+textarea.cmp-adaptiveform-scribble__widget{
+  
+}
+
+.cmp-adaptiveform-scribble__label {
+
+}
+.cmp-adaptiveform-scribble__label-container{
+  
+}
+
+.cmp-adaptiveform-scribble__longdescription {
+}
+
+.cmp-adaptiveform-scribble__shortdescription {
+}
+
+.cmp-adaptiveform-scribble__questionmark {
+
+}
+
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/site/js.txt b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/site/js.txt
new file mode 100644
index 0000000000..daea287c51
--- /dev/null
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/site/js.txt
@@ -0,0 +1,19 @@
+###############################################################################
+# Copyright 2025 Adobe
+#
+# Licensed 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.
+###############################################################################
+
+#base=js
+GeoLocQuery.js
+scribbleview.js
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/site/js/GeoLocQuery.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/site/js/GeoLocQuery.js
new file mode 100644
index 0000000000..38c3683dc0
--- /dev/null
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/site/js/GeoLocQuery.js
@@ -0,0 +1,64 @@
+/*******************************************************************************
+ * Copyright 2025 Adobe
+ *
+ * Licensed 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.
+ ******************************************************************************/
+
+if(window.GeoLocationQuery === undefined) {
+        window.GeoLocationQuery = class GeoLocationQuery {
+        constructor() {
+            this._active = false;
+        }
+
+        init(success, failure) {
+            this._successHandler = success;
+            this._errorHandler = failure;
+            this._active = true;
+            return this;
+        }
+
+        _handleSuccess(data) {
+            if (this._successHandler) {
+                this._successHandler(data);
+            }
+        }
+
+        _handleError(err) {
+            if (this._errorHandler) {
+                this._errorHandler(err);
+            }
+        }
+
+        query() {
+            const onSuccess = (pos) => {
+                if (this._active) {
+                    this._handleSuccess(pos);
+                }
+                this._active = false;
+            };
+
+            const onError = (err) => {
+                if (this._active) {
+                    this._handleError(err);
+                }
+                this._active = false;
+            };
+
+            navigator.geolocation.getCurrentPosition(onSuccess, onError, { timeout: 10000 });
+        }
+
+        cancel() {
+            this._active = false;
+        }
+    }
+}
\ No newline at end of file
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/site/js/scribbleview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/site/js/scribbleview.js
new file mode 100644
index 0000000000..f2d70ea4b2
--- /dev/null
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/clientlibs/site/js/scribbleview.js
@@ -0,0 +1,730 @@
+/*******************************************************************************
+ * Copyright 2025 Adobe
+ *
+ * Licensed 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.
+ ******************************************************************************/
+
+
+(function() {
+    "use strict";
+    /**
+     * class definition for GeoLocationQueryRequest
+     * encapsulated success and error handlers
+    */
+    class Scribble extends FormView.FormFieldBase {
+        _geoLocQuery=null;
+        _signSubmitted=false;
+        _enforceGeoLoc=!!navigator.userAgent.match(/iPad/i);
+        existingSign = '';
+        existingCanvas = '';
+        static NS = FormView.Constants.NS;
+        static IS = "adaptiveFormScribble";
+        static bemBlock = 'cmp-adaptiveform-scribble';
+        static selectors  = {
+            self: `[data-${this.NS}-is="${this.IS}"]`,
+            scribbleContainer: `.${Scribble.bemBlock}__container`,
+            scribbleContainerPanel: `.${Scribble.bemBlock}__panel`,
+            keyboardSignBox: `.${Scribble.bemBlock}__keyboard-sign-box`,
+            scribbleControlPanel: `.${Scribble.bemBlock}__controlpanel`,
+            geoCanvas: `.${Scribble.bemBlock}__geocanvas`,
+            canvasSignedContainer: `.${Scribble.bemBlock}__canvas-signed-container`,
+            canvas: `.${Scribble.bemBlock}__canvas`,
+            label: `.${Scribble.bemBlock}__label`,
+            description: `.${Scribble.bemBlock}__longdescription`,
+            qm: `.${Scribble.bemBlock}__questionmark`,
+            errorDiv: `.${Scribble.bemBlock}__errormessage`,
+            tooltipDiv: `.${Scribble.bemBlock}__shortdescription`,
+            scribbleCloseButton: `.${Scribble.bemBlock}__button-close`,
+            brushControl: `.${Scribble.bemBlock}__control-brush`,
+            scribbleGeoControl: `.${Scribble.bemBlock}__control-geo`,
+            clearControl: `.${Scribble.bemBlock}__control-clear`,
+            scribbleTextControl: `.${Scribble.bemBlock}__control-text`,
+            scribbleMessage: `.${Scribble.bemBlock}__control-message`,
+            clearSignButton: `.${Scribble.bemBlock}__button--primary`,
+            cancelClearSignButton: `.${Scribble.bemBlock}__button--secondary`,
+            clearSignContainer: `.${Scribble.bemBlock}__clearsign-container`,
+            scribbleSubmitControl: `.${Scribble.bemBlock}__save-button`,
+            scribbleBrushList: `.${Scribble.bemBlock}__brushlist`,
+            signCanvases: `.${Scribble.bemBlock}__signcanvases`,
+            saveCanvas: `.${Scribble.bemBlock}__save-button`,
+            canvasSignedImage: `.${Scribble.bemBlock}__canvas-signed-image`,
+            mainCanvas: `.${Scribble.bemBlock}__canvas__main`
+        };
+
+        constructor(params) {
+            super(params);
+            this.initializeScribble();
+        }
+
+        initializeScribble() {
+            this.getCanvasContainer().addEventListener('click', () => this.scribbleContainerClickHandler());
+            this.initScribbleModal();
+        }
+        
+        getWidget() {
+            return this.element.querySelector(Scribble.selectors.canvasSignedContainer);
+        }
+
+        getLabel() {
+            return this.element.querySelector(Scribble.selectors.label);
+        }
+
+        getErrorDiv() {
+            return this.element.querySelector(Scribble.selectors.errorDiv);
+        }
+
+        getTooltipDiv() {
+            return this.element.querySelector(Scribble.selectors.tooltipDiv);
+        }
+
+        getQuestionMarkDiv() {
+            return this.element.querySelector(Scribble.selectors.qm);
+        }
+
+        getScribbleControlPanel() {
+            return document.querySelector(Scribble.selectors.scribbleControlPanel);
+        }
+
+        getScribbleContainer() {
+            return document.querySelector(Scribble.selectors.scribbleContainer);
+        }
+
+        getMessage() {
+            return document.querySelector(Scribble.selectors.scribbleMessage);
+        }
+
+        getClearSignContainer() {
+            return document.querySelector(Scribble.selectors.clearSignContainer);
+        }
+
+        getClearSignButton() {
+            return document.querySelector(Scribble.selectors.clearSignButton);
+        }
+
+        getCancelClearSignButton() {
+            return document.querySelector(Scribble.selectors.cancelClearSignButton);
+        }
+
+        getBrushList() {
+            return document.querySelector(Scribble.selectors.scribbleBrushList);
+        }
+
+        getBrush() {
+            return document.querySelector(Scribble.selectors.brushControl);
+        }
+
+        getClearControl() {
+            return document.querySelector(Scribble.selectors.clearControl);
+        }
+
+        getSaveControl() {
+            return document.querySelector(Scribble.selectors.saveCanvas);
+        }
+
+        getGeoLocationIcon() {
+            return document.querySelector(Scribble.selectors.scribbleGeoControl);
+        }
+
+        getTextSignControl() {
+            return document.querySelector(Scribble.selectors.scribbleTextControl);
+        }
+
+        getScribbleContainerPanel() {
+            return document.querySelector(Scribble.selectors.scribbleContainerPanel);
+        }
+
+        getKeyboardSignBox() {
+            return document.querySelector(Scribble.selectors.keyboardSignBox);
+        }
+
+        getGeoCanvas() {
+            return document.querySelector(Scribble.selectors.geoCanvas);
+        }
+
+        getCanvasContainer() {
+            return this.element.querySelector(Scribble.selectors.canvasSignedContainer);
+        }
+
+        getScribbleCloseButton() {
+            return this.element.querySelector(Scribble.selectors.scribbleCloseButton);
+        }
+
+        getCanvas() {
+            return this.element.querySelector(Scribble.selectors.canvas);
+        }
+
+        getMainCanvas() {
+            return this.element.querySelector(Scribble.selectors.mainCanvas);
+        }
+
+        getSignCanvasesContainer() {
+            return this.element.querySelector(Scribble.selectors.signCanvases);
+        }
+
+        getDescription() {
+            return this.element.querySelector(Scribble.selectors.description);
+        }
+
+        getSignedCanvasImage() {
+            return document.querySelector(Scribble.selectors.canvasSignedImage);
+        }
+
+        showMessage(msg){
+            if(this._msgTimeout) { clearTimeout(this._msgTimeout); this._msgTimeout=0; }
+             const scribbleMessage = this.getMessage();
+             scribbleMessage.innerHTML = msg;
+             scribbleMessage.style.display = 'block';
+             this._msgTimeout = window.setTimeout(function(){
+                scribbleMessage.innerHTML = '';
+             },15000);
+        }
+
+        extractData(datauri){
+            var idx;
+            if(datauri!=null&&datauri.length>0&&datauri.indexOf("data:")==0){
+                if((idx=datauri.indexOf(","))>0) {
+                    return datauri.substr(idx+1);
+                }
+            }
+        }
+
+        openClearSignModal() {
+            const clearSignContainer = this.getClearSignContainer();
+            const clearSignButton = this.getClearSignButton();
+            const cancelClearSignButton = this.getCancelClearSignButton();
+        
+            clearSignContainer.style.display = 'inline-block';
+        
+            const handleClearSign = () => {
+                this.existingSign = '';
+                const mainCanvas = this.getMainCanvas();
+                const existingCanvas = this.existingCanvas;
+        
+                if (mainCanvas && existingCanvas) {
+                    mainCanvas.parentNode.replaceChild(existingCanvas, mainCanvas);
+                    const ctx = existingCanvas.getContext('2d');
+                    ctx.clearRect(0, 0, existingCanvas.width, existingCanvas.height);
+                }
+        
+                const geoCanvas = this.getGeoCanvas();
+                if (geoCanvas) {
+                    const geoCtx = geoCanvas.getContext('2d');
+                    geoCtx.clearRect(0, 0, geoCanvas.width, geoCanvas.height);
+                }
+        
+                this.enableControls(['brush', 'geo', 'clear', 'text', 'save']);
+        
+                const signedImage = this.getSignedCanvasImage();
+                if (signedImage) {
+                    signedImage.removeAttribute('src');
+                    signedImage.removeAttribute('style');
+                    document.querySelector('.cmp-adaptiveform-scribble__clear-sign')?.remove();
+                    clearSignContainer.style.display = 'none';
+                    this.getKeyboardSignBox().value = '';
+                }
+        
+                this._signSubmitted = false;
+                this.setModelValue(null);
+            };
+        
+            clearSignButton.addEventListener('click', handleClearSign);
+        
+            cancelClearSignButton.addEventListener('click', () => {
+                clearSignContainer.style.display = 'none';
+            });
+        }
+
+        createCanvas() {
+            const mainCanvas = document.createElement('canvas');
+            mainCanvas.classList.add('cmp-adaptiveform-scribble__canvasImage');
+        }
+
+        updateValue(value) {
+            // html sets undefined value as undefined string in input value, hence this check is added
+            let widgetValue = typeof value === "undefined" ? null : value;
+            const signedImage = this.getSignedCanvasImage();
+            if (signedImage && widgetValue) {
+                signedImage.src = `data:image/png;base64,${widgetValue}`;
+                super.updateEmptyStatus();
+            }
+        }
+
+        isCanvasEmpty(canvas) {
+            const ctx = canvas.getContext('2d');
+            const width = canvas.width;
+            const height = canvas.height;
+            
+            // Get pixel data from the canvas
+            const imageData = ctx.getImageData(0, 0, width, height);
+            
+            // Check if any pixel is not transparent (not [0, 0, 0, 0] = transparent)
+            for (let i = 0; i < imageData.data.length; i += 4) {
+                if (imageData.data[i + 3] > 0) {
+                    return false; // Found non-transparent pixel
+                }
+            }
+            
+            return true; // No non-transparent pixels found
+        }
+
+        submitSign() {
+            if (!this.isCanvasEmpty(this.canvas)) {
+                const mainCanvas = this.createMainCanvas();
+                const sigCnv = this.getCanvas(); // Get the sign canvas
+                const geoCnv = this.getGeoCanvas(); // Get the geo canvas
+        
+                this.drawCanvasesOnMainCanvas(mainCanvas, sigCnv, geoCnv);
+        
+                this.existingCanvas = sigCnv;
+                sigCnv.height = mainCanvas.height;
+                sigCnv.parentNode.replaceChild(mainCanvas, sigCnv);
+        
+                let submitData = mainCanvas.toDataURL("image/png");
+                this.existingSign = mainCanvas;
+                
+                submitData = submitData.replace(/^data:image\/png;base64,/, '');
+        
+                this.updateSignedImage(submitData);
+                this.setModelValue(submitData);
+                this.addClearSignButton();
+        
+                if (this._geoLocQuery) {
+                    this._geoLocQuery.cancel(); // Cancel the current geo loc request
+                }
+        
+                this.closeEditModal();
+                this._signSubmitted = true;
+            }
+        }
+
+        createMainCanvas() {
+            const mainCanvas = document.createElement('canvas');
+            mainCanvas.classList.add('cmp-adaptiveform-scribble__canvas__main');
+            return mainCanvas;
+        }
+
+        drawCanvasesOnMainCanvas(mainCanvas, sigCnv, geoCnv) {
+            const ctx = mainCanvas.getContext('2d');
+            if (geoCnv && geoCnv.width > 0 && geoCnv.height > 0) {
+                // Set the dimensions of the mainCanvas to accommodate both canvases vertically
+                mainCanvas.width = Math.max(sigCnv.width, geoCnv.width);
+                mainCanvas.height = sigCnv.height + geoCnv.height;
+                // Draw the sign canvas on the main canvas
+                ctx.drawImage(sigCnv, 0, 0);
+                // Draw the geo canvas below the sign canvas
+                ctx.drawImage(geoCnv, 0, sigCnv.height, geoCnv.width, geoCnv.height);
+            } else {
+                mainCanvas.width = sigCnv.width;
+                mainCanvas.height = sigCnv.height;
+                ctx.drawImage(sigCnv, 0, 0);
+            }
+        }
+
+        updateSignedImage(newData) {
+            const img = this.getSignedCanvasImage();
+            img.src = `data:image/png;base64,${newData}`;
+            img.style.width = '100%';
+            img.style.height = '150px';
+        }
+
+        addClearSignButton() {
+            const clearSignButton = document.createElement('div');
+            clearSignButton.classList.add('cmp-adaptiveform-scribble__clear-sign');
+
+            const mainCanvasImageContainer = this.getCanvasContainer();
+            mainCanvasImageContainer.appendChild(clearSignButton);
+
+            clearSignButton.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.openClearSignModal();
+            });
+        }
+
+        geoQueryErrorHandler(err){
+            this.showMessage('errorFetchGeoLocation');
+        }
+
+        renderBrushList() {
+            [2,3,4,5,6,7,8,9,10].forEach((brush) => {
+                var divel = document.createElement('div');
+                var cnv = document.createElement('canvas');
+                var ctx = cnv.getContext('2d');
+                cnv.style.border='1px solid #AAAAAA';
+                cnv.width=100;
+                cnv.height=20;
+                cnv.style.backgroundColor='white'
+                ctx.lineWidth=brush;
+                ctx.beginPath();
+                ctx.moveTo(10,cnv.height/2);
+                ctx.lineTo(cnv.width-10,cnv.height/2);
+                ctx.stroke();
+                divel.appendChild(cnv);
+                divel.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this.context.lineWidth=brush;
+                    this.toggleBrushList();
+                    // this.handleBrush(e);
+                })
+                this.getBrushList().append(divel);
+             });
+        }
+
+        resizeCanvas(percentage) {
+            const signCanvas = this.getCanvas();
+            const ctx = signCanvas.getContext('2d', { willReadFrequently: true });
+            const container = this.getCanvasContainer();
+            this.getSignCanvasesContainer().style.width = `${percentage}%`;
+            
+            // Ensure the canvas has valid dimensions
+            if (signCanvas.width === 0 || signCanvas.height === 0) {
+                return;
+            }
+            
+            // Save the content of the canvas if it has valid dimensions
+            let imgData = null;
+            if (signCanvas.width > 0 && signCanvas.height > 0) {
+                imgData = ctx.getImageData(0, 0, signCanvas.width, signCanvas.height);
+            }
+            // Calculate the new width based on the percentage of the container's width
+            const newWidth = container.offsetWidth * (percentage / 100);
+            // Set the new width and height of the canvas
+            signCanvas.width = newWidth;
+            // Restore the content back to the resized canvas if it has valid content
+            if (imgData) {
+                ctx.putImageData(imgData, 0, 0);
+            }
+        }
+
+        geoQuerySuccessHandler(position) {
+            if (position && position.coords) {
+                this.showMessage('');
+                const { latitude, longitude } = position.coords;
+                const latStr = `Latitude: ${latitude}`;
+                const longStr = `Longitude: ${longitude}`;
+                const dateObj = new Date();
+                const tZone = (dateObj.getTimezoneOffset() / 60) * -1;
+                const timeStr = `${dateObj.getTime()}: ${(dateObj.getMonth() + 1)}/${dateObj.getDate()}/${dateObj.getFullYear()} ${dateObj.getHours()}:${dateObj.getMinutes()}:${dateObj.getSeconds()}${tZone > 0 ? ' +' : ' '}${tZone}`;
+                this.updateGeoCanvas(latStr, longStr, timeStr);
+            }
+        }
+
+        updateGeoCanvas(latStr, longStr, timeStr) {
+            const geoCanvas = this.getGeoCanvas();
+            geoCanvas.style.height = '50px';
+            geoCanvas.style.width = '200px';
+            geoCanvas.style.display = 'block';
+
+            if (geoCanvas) {
+                const ctx = geoCanvas.getContext('2d');
+                geoCanvas.width = geoCanvas.offsetWidth;
+                geoCanvas.height = geoCanvas.offsetHeight;
+
+                ctx.font = 'bold 10px Arial'; // Font size and type
+                ctx.fillStyle = 'black'; // Text color
+                ctx.measureText("m").width * 1.5;
+                let x = 0;
+                let y = 15;
+
+                // Draw the text on the canvas
+                ctx.fillText(latStr, x, y);
+                ctx.fillText(longStr, x, y + 15);
+                ctx.fillText(timeStr, x, y + 30);
+            }
+        }
+
+        handleGeoLocation() {
+            if (navigator.geolocation) {
+                this._geoLocQuery = new GeoLocationQuery();
+                this._geoLocQuery.init(
+                    this.geoQuerySuccessHandler.bind(this),
+                    this.geoQueryErrorHandler.bind(this)
+                );
+                this._geoLocQuery.query();
+                this.showMessage('Fetching Geo Location...');
+            }
+        }
+
+        geoQueryErrorHandler(err) {
+            this.showMessage('Error fetching geolocation');
+        }
+
+        enableControls(controls) {
+            controls.forEach(control => {
+                const element = document.querySelector('.' + Scribble.bemBlock + '__control-' + control) || document.querySelector('.' + Scribble.bemBlock + '__' + control + '-button');;
+                element?.classList.remove('disable_button');
+                element.removeAttribute('disabled');
+                element.setAttribute('aria-disabled', 'false');
+            });
+        }
+
+        disableControl(controls) {
+            controls.forEach(control => {
+                const element = document.querySelector('.' + Scribble.bemBlock + '__control-' + control) || document.querySelector('.' + Scribble.bemBlock + '__' + control + '-button');
+                element?.classList.add('disable_button');
+                element.setAttribute('disabled', 'true');
+                element.setAttribute('aria-disabled', 'true');
+            });
+        }
+
+        toggleBrushList(event) {
+            var brushList = this.getBrushList();
+            if(getComputedStyle(brushList).display === 'none') {
+                brushList.style.display = 'block';
+            } else {
+                brushList.style.display = 'none';
+            }
+        }
+
+        controlPanelClickHandler(event) {
+            const ariaLabel = event.target.getAttribute('aria-label');
+            switch(ariaLabel){
+                case 'save':
+                    this.submitSign();
+                    break;
+                case 'close':
+                    this.closeEditModal();
+                    break;
+                case 'clearSign':
+                    this.eraseSignature();
+                    break;
+                case 'textSign':
+                    this.enableSignatureTextBox();
+                    break;
+                case 'geolocation':
+                    this.handleGeoLocation();
+                    break;
+                case 'brushes':
+                    this.handleBrush(event);
+                    this.toggleBrushList();
+                    break;
+            }
+        }
+
+        closeEditModal() {
+            if(this.getCanvas()) this.getCanvas().style.display = 'block';
+            if(!this._signSubmitted) {
+                this.eraseSignature()
+            }
+            this.hideScribbleModal();
+        }
+
+        handleBrush(evt){
+            this.getKeyboardSignBox().style.display = 'none';
+            this.canvas.style.display = "block";
+            this.context.clearRect(0, 0, this.canvas?.width, this.canvas?.height);
+            this.eraseSignature();
+            this.initializeCanvas();
+        }
+        initScribbleModal() {
+            const controlPanel = this.getScribbleControlPanel();
+            const toggleBrushListIcon = this.getBrush();
+            const brushList = this.getBrushList();
+            const keyboardSignBox = this.getKeyboardSignBox();
+        
+            this.renderBrushList();
+        
+            this.addEventListeners(controlPanel, 'click', this.controlPanelClickHandler.bind(this));
+        
+            keyboardSignBox.addEventListener('input', (event) => {
+                if (event?.target?.value) {
+                    this.enableControls(['save', 'clear']);
+                } else {
+                    this.disableControl(['save', 'clear']);
+                }
+            });
+        
+            keyboardSignBox.addEventListener('keyup', () => {
+                this.updateKeyboardSignBoxFont(keyboardSignBox);
+            });
+        
+            document.addEventListener('click', (event) => {
+                if (!brushList.contains(event.target) && !toggleBrushListIcon.contains(event.target)) {
+                    brushList.style.display = 'none';
+                }
+            });
+        }
+        
+        addEventListeners(element, eventType, handler, checkDisabled = false) {
+            if (element) {
+                element.addEventListener(eventType, (event) => {
+                    if (!checkDisabled || element.getAttribute('disabled') !== 'true') {
+                        handler(event);
+                    }
+                });
+            }
+        }
+        
+        updateKeyboardSignBoxFont(keyboardSignBox) {
+            const fontFamily = "sans-serif, Georgia";
+            const fontStyle = "italic";
+            keyboardSignBox.style.font = `${fontStyle} 2rem ${fontFamily}`;
+            const value = keyboardSignBox.value;
+            this.context.font = `${fontStyle} 10rem ${fontFamily}`;
+            this.context.fillText(value, 0, this.getCanvas().height / 2);
+        }
+
+        enableSignatureTextBox() {
+            this.eraseSignature();
+            this.getKeyboardSignBox().style.display = "inline-block";
+            this.getCanvas().style.display = "none";
+        }
+
+        eraseSignature() {
+            this.context?.clearRect(0, 0, this.canvas?.width, this.canvas?.height);
+            const geoCnv = this.getGeoCanvas();
+            if(geoCnv) {
+                const geoCanvasContext = geoCnv?.getContext('2d');
+                geoCanvasContext?.clearRect(0, 0, geoCnv.width, geoCnv.height);
+                geoCnv.style.display = 'none';
+            }
+            this.getKeyboardSignBox().value='';
+            this.disableControl(['clear','save']);
+        }
+
+        resizeAndFixCanvas() {
+            const dpr = window.devicePixelRatio || 1;
+            let imgData = null;
+            if (this.canvas.width > 0 && this.canvas.height > 0) {
+                imgData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
+            }
+            this.canvas.width = this.canvas.offsetWidth * dpr;
+            this.canvas.height = this.canvas.offsetHeight * dpr;
+            if (imgData) {
+                this.context.putImageData(imgData, 0, 0);
+            }
+        }
+
+        handleCanvasEvent(event) {
+            switch (event.type) {
+                case 'mousedown':
+                case 'touchstart':
+                    this.startDrawing(event);
+                    break;
+                case 'mousemove':
+                case 'touchmove':
+                    this.draw(event);
+                    break;
+                case 'mouseup':
+                case 'mouseleave':
+                case 'touchend':
+                case 'touchcancel':
+                    this.stopDrawing();
+                    break;
+            }
+        }
+
+        addCanvasEventListeners() {
+            const events = ['mousedown', 'mousemove', 'mouseup', 'mouseleave', 'touchstart', 'touchmove', 'touchend', 'touchcancel'];
+            events.forEach(event => {
+                this.canvas.addEventListener(event, this.handleCanvasEvent.bind(this));
+            });
+        }
+
+        initializeCanvas() {
+            if(this.existingSign) {
+                this.getCanvasContainer().style.width = '100%';
+                this.getMainCanvas().style.border = '1px solid black';
+                this.getKeyboardSignBox().style.display = 'none';
+                this.disableControl(['brush','geo','clear','text','save']);
+            } else {
+                this.canvas = this.getCanvas();
+                this.canvas.style.display = 'block';
+                this.context = this.canvas.getContext('2d', { willReadFrequently: true });
+                this.resizeCanvas(100);
+                this.resizeAndFixCanvas();
+                if (this.canvas) {
+                    this.canvas.style.border = '1px dashed #AAAAAA';
+                    this.getKeyboardSignBox().style.display = 'none';
+                    this.addCanvasEventListeners();
+                    this.isDrawing = false;
+                }
+            }
+            // Add event listener for window resize to make the canvas responsive
+            window.addEventListener('resize', this.resizeAndFixCanvas.bind(this));
+        // }
+        }
+
+        showScribbleModal() {
+            if(window.getComputedStyle(this.getScribbleContainer()).display !== 'block') {
+                this.disableControl(['clear','save']);
+            }
+            this.getScribbleContainer().style.display = 'block';
+        }
+
+        hideScribbleModal() {
+            this.getScribbleContainer().style.display = 'none';
+        }
+
+        scribbleContainerClickHandler() {
+            this.showScribbleModal();
+            this.initializeCanvas();
+        }
+        
+        startDrawing(event) {
+            // Ensure the context is initialized
+            if (!this.context) {
+                return;
+            }
+        
+            // Normalize event coordinates for touch events
+            const { offsetX, offsetY } = this.getEventCoordinates(event);
+        
+            this.isDrawing = true;
+            this.context.beginPath();
+            this.context.moveTo(offsetX, offsetY);
+        }
+
+        getMousePos(event) {
+            const rect = this.canvas.getBoundingClientRect();
+            const offsetX = event.clientX - rect.left;
+            const offsetY = event.clientY - rect.top;
+            return { offsetX, offsetY };
+        }
+
+        getEventCoordinates(event) {
+            const rect = this.canvas.getBoundingClientRect();
+            const dpr = window.devicePixelRatio || 1;
+            if (event.touches && event.touches.length > 0) {
+                const touch = event.touches[0];
+                return {
+                    offsetX: (touch.clientX - rect.left) * dpr,
+                    offsetY: (touch.clientY - rect.top) * dpr
+                };
+            } else {
+                return {
+                    offsetX: (event.clientX - rect.left) * dpr,
+                    offsetY: (event.clientY - rect.top) * dpr
+                };
+            }
+        }
+
+        draw(event) {
+            if (!this.isDrawing) return;
+            const { offsetX, offsetY } = this.getEventCoordinates(event);
+            this.context.lineTo(offsetX, offsetY);
+            this.context.stroke();
+            this.enableControls(['clear','save']);
+        }
+
+        stopDrawing() {
+            if (this.isDrawing) {
+                this.context.closePath();
+                this.isDrawing = false;
+            }
+        }
+    }
+
+    FormView.Utils.setupField(({element, formContainer}) => {
+        return new Scribble({element, formContainer})
+    }, Scribble.selectors.self);
+})();
\ No newline at end of file
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/scribble.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/scribble.html
new file mode 100644
index 0000000000..d38261241e
--- /dev/null
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/scribble.html
@@ -0,0 +1,92 @@
+
+<!--/*
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  ~ Copyright 2025 Adobe
+  ~
+  ~ Licensed 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.
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+*/ -->
+
+<sly data-sly-use.scribble="com.adobe.cq.forms.core.components.models.form.Scribble"
+     data-sly-use.renderer="${'scribble.js'}"
+     data-sly-use.clientlib="${'/libs/granite/sightly/templates/clientlib.html'}"
+     data-sly-use.label="${renderer.labelPath}"
+     data-sly-use.shortDescription="${renderer.shortDescriptionPath}"
+     data-sly-use.longDescription="${renderer.longDescriptionPath}"
+     data-sly-use.errorMessage="${renderer.errorMessagePath}"
+     data-sly-use.questionMark="${renderer.questionMarkPath}"></sly>
+
+<div data-sly-use.formstructparser="com.adobe.cq.forms.core.components.models.form.FormStructureParser"
+     class="cmp-adaptiveform-scribble"
+     data-cmp-is="adaptiveFormScribble"
+     data-cmp-visible="${scribble.visible ? 'true' : 'false'}"
+     data-cmp-enabled="${scribble.enabled ? 'true' : 'false'}"
+     data-cmp-required="${scribble.required ? 'true': 'false'}"
+     id="${scribble.id}"
+     data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"
+     data-sly-test.widgetId="${'{0}-{1}' @ format=[scribble.id, 'widget']}">
+
+    <div class="cmp-adaptiveform-scribble__label-container">
+      <div data-sly-call="${label.label @componentId=widgetId, labelValue=scribble.label.value, labelVisible=scribble.label.visible, labelRichText=scribble.label.richText, bemBlock='cmp-adaptiveform-scribble'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=scribble.id, longDescription=scribble.description, bemBlock='cmp-adaptiveform-scribble'}" data-sly-unwrap></div>
+    </div>
+
+    <button type="button" class="cmp-adaptiveform-scribble__canvas-signed-container">
+      <img class="cmp-adaptiveform-scribble__canvas-signed-image" src="${scribble.value}" />
+    </button>
+
+    <div data-sly-call="${shortDescription.shortDescription @componentId=scribble.id, shortDescriptionVisible=scribble.tooltipVisible, shortDescription=scribble.tooltip, bemBlock='cmp-adaptiveform-scribble'}" data-sly-unwrap>
+    </div>
+
+    <div data-sly-call="${longDescription.longDescription @componentId= scribble.id, longDescription=scribble.description, bemBlock='cmp-adaptiveform-scribble'}" data-sly-unwrap></div>
+
+    <div data-sly-call="${errorMessage.errorMessage @componentId=scribble.id, bemBlock='cmp-adaptiveform-scribble'}" data-sly-unwrap></div>
+      <div class="cmp-adaptiveform-scribble__container" tabindex="0" role="dialog" aria-label="${'pleaseSignText' @ i18n}">
+      <div class="cmp-adaptiveform-scribble__header">${scribble.dialogLabel}</div>
+        <div class="cmp-adaptiveform-scribble__content">
+          <div class="cmp-adaptiveform-scribble__canvases">
+            <div class="cmp-adaptiveform-scribble__signcanvases" style="display:inline-block; vertical-align:top;">
+              <canvas class="cmp-adaptiveform-scribble__canvas" aria-label="${'signature canvas' @ i18n}"></canvas>
+              <input type="text" class="cmp-adaptiveform-scribble__keyboard-sign-box" name="signatureText" placeholder="${scribble.placeHolder}">
+            </div>
+            <canvas class="cmp-adaptiveform-scribble__geocanvas" width="0" height="0" aria-label="${'geolocation' @ i18n}" ></canvas>
+          </div>
+          <div class="cmp-adaptiveform-scribble__controlpanel">
+            <div class="cmp-adaptiveform-scribble__controls">
+              <button type="button" class="cmp-adaptiveform-scribble__control-brush cmp-adaptiveform-scribble__button" tabindex="0" aria-label="${'brushes' @ i18n}"></button>
+              <div class="cmp-adaptiveform-scribble__brushlist"></div>
+              <button type="button" class="cmp-adaptiveform-scribble__control-clear cmp-adaptiveform-scribble__button" tabindex="0" aria-label="${'clearSign' @ i18n}" ></button>
+              <button type="button" class="cmp-adaptiveform-scribble__control-geo cmp-adaptiveform-scribble__button" tabindex="0" aria-label="${'geolocation' @ i18n}" ></button>
+              <button type="button" class="cmp-adaptiveform-scribble__control-text cmp-adaptiveform-scribble__button" tabindex="0" aria-label="${'textSign' @ i18n}"></button>
+              <div class="cmp-adaptiveform-scribble__control-message"></div>
+            </div>
+            <div class="cmp-adaptiveform-scribble__controlpanel__controls">
+              <button class="cmp-adaptiveform-scribble__close-button" tabindex="0" type="button" aria-label="${'close' @ i18n}">${"Close" @ i18n}</button>
+              <button class="cmp-adaptiveform-scribble__save-button" tabindex="0" type="button" aria-label="${'save' @ i18n}">${"Save" @ i18n}</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="cmp-adaptiveform-scribble__clearsign-container">
+        <h1 class="cmp-adaptiveform-scribble__clearsign-title">${"Erase Current Signature?" @ i18n}</h1>
+        <div class="cmp-adaptiveform-scribble__clearsign-content" class="msgBoxTypenull">
+          <div class="cmp-adaptiveform-scribble__clearsign-message">
+            ${"This will permanently remove the signature you've drawn. Do you wish to proceed and begin again?" @ i18n}
+          </div>
+          <div class="cmp-adaptiveform-scribble__clearsign-panel">
+            <button type="button" id="msgBox_No" class="cmp-adaptiveform-scribble__button--secondary">${"Cancel" @ i18n}</button>
+            <button type="button" id="msgBox_Yes" class="cmp-adaptiveform-scribble__button--primary">${"Clear" @ i18n}</button>
+          </div>
+        </div>
+      </div>
+</div>
\ No newline at end of file
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/scribble.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/scribble.js
new file mode 100644
index 0000000000..4f28586a44
--- /dev/null
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/scribble/v1/scribble/scribble.js
@@ -0,0 +1,34 @@
+/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ ~ Copyright 2025 Adobe
+ ~
+ ~ Licensed 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.
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+
+use(function () {
+
+  var clientlibsArr = ['core.forms.components.base.v1.editor'];
+  var labelPath = 'core/fd/components/af-commons/v1/fieldTemplates/label.html';
+  var shortDescriptionPath = "core/fd/components/af-commons/v1/fieldTemplates/shortDescription.html";
+  var longDescriptionPath = "core/fd/components/af-commons/v1/fieldTemplates/longDescription.html";
+  var questionMarkPath = "core/fd/components/af-commons/v1/fieldTemplates/questionMark.html"
+  var errorMessagePath = "core/fd/components/af-commons/v1/fieldTemplates/errorMessage.html";
+
+  return {
+    labelPath: labelPath,
+    shortDescriptionPath: shortDescriptionPath,
+    longDescriptionPath: longDescriptionPath,
+    questionMarkPath: questionMarkPath,
+    errorMessagePath: errorMessagePath,
+    clientlibs: clientlibsArr
+  }
+});
\ No newline at end of file
diff --git a/ui.frontend/package-lock.json b/ui.frontend/package-lock.json
index 06a1836a81..9f038be84d 100644
--- a/ui.frontend/package-lock.json
+++ b/ui.frontend/package-lock.json
@@ -101,8 +101,7 @@
     },
     "node_modules/@adobe/json-formula": {
       "version": "0.1.50",
-      "resolved": "https://registry.npmjs.org/@adobe/json-formula/-/json-formula-0.1.50.tgz",
-      "integrity": "sha512-dmlLYfbty8NPVIdxvI9cJ+ZdXsrRCFrCdmL1+aR2auEzXJ86rD0bm1qu+S4NOpFiZLKIyx0zvUTykms40vNjsA==",
+      "license": "Apache-2.0",
       "engines": {
         "node": ">=16.0.0"
       }
@@ -11127,9 +11126,7 @@
   },
   "dependencies": {
     "@adobe/json-formula": {
-      "version": "0.1.50",
-      "resolved": "https://registry.npmjs.org/@adobe/json-formula/-/json-formula-0.1.50.tgz",
-      "integrity": "sha512-dmlLYfbty8NPVIdxvI9cJ+ZdXsrRCFrCdmL1+aR2auEzXJ86rD0bm1qu+S4NOpFiZLKIyx0zvUTykms40vNjsA=="
+      "version": "0.1.50"
     },
     "@aemforms/af-core": {
       "version": "0.22.124",
diff --git a/ui.tests/test-module/libs/commons/formsConstants.js b/ui.tests/test-module/libs/commons/formsConstants.js
index c511260f7a..f136a954a4 100644
--- a/ui.tests/test-module/libs/commons/formsConstants.js
+++ b/ui.tests/test-module/libs/commons/formsConstants.js
@@ -50,6 +50,7 @@ var formsConstants = {
                 "termsandconditions": "/apps/forms-components-examples/components/form/termsandconditions",
                 "submitButton": "/apps/forms-components-examples/components/form/actions/submit",
                 "review": "/apps/forms-components-examples/components/form/review",
+                "scribble": "/apps/forms-components-examples/components/form/scribble",
             }
         },
         resourceType : {
diff --git a/ui.tests/test-module/specs/scribble/scribble.authoring.cy.js b/ui.tests/test-module/specs/scribble/scribble.authoring.cy.js
new file mode 100644
index 0000000000..91588e7fbf
--- /dev/null
+++ b/ui.tests/test-module/specs/scribble/scribble.authoring.cy.js
@@ -0,0 +1,112 @@
+/*******************************************************************************
+ * Copyright 2025 Adobe
+ *
+ * Licensed 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.
+ ******************************************************************************/
+
+const afConstants = require("../../libs/commons/formsConstants");
+const sitesSelectors = require("../../libs/commons/sitesSelectors");
+
+
+describe('Page - Authoring', function () {
+    const dropScribbleInContainer = function () {
+        const dataPath = "/content/forms/af/core-components-it/blank/jcr:content/guideContainer/*",
+            responsiveGridDropZoneSelector = sitesSelectors.overlays.overlay.component + "[data-path='" + dataPath + "']";
+        cy.selectLayer("Edit");
+        cy.insertComponent(responsiveGridDropZoneSelector, "Adaptive Form Scribble", afConstants.components.forms.resourceType.scribble);
+        cy.get('body').click(0, 0);
+    }
+
+    const dropScribbleInSites = function () {
+        const dataPath = "/content/core-components-examples/library/adaptive-form/scribble/jcr:content/root/responsivegrid/demo/component/guideContainer/*",
+            responsiveGridDropZoneSelector = sitesSelectors.overlays.overlay.component + "[data-path='" + dataPath + "']";
+        cy.selectLayer("Edit");
+        cy.insertComponent(responsiveGridDropZoneSelector, "Adaptive Form Scribble", afConstants.components.forms.resourceType.scribble);
+        cy.get('body').click(0, 0);
+    }
+
+
+    context('Open Forms Editor', function () {
+        const pagePath = "/content/forms/af/core-components-it/blank",
+            scribbleEditPath = pagePath + afConstants.FORM_EDITOR_FORM_CONTAINER_SUFFIX + "/scribble",
+            scribbleEditPathSelector = "[data-path='" + scribbleEditPath + "']",
+            scribbleDrop = pagePath + afConstants.FORM_EDITOR_FORM_CONTAINER_SUFFIX + "/" + afConstants.components.forms.resourceType.scribble.split("/").pop(),
+            scribbleBlockBemSelector = '.cmp-adaptiveform-scribble',
+            editDialogConfigurationSelector = "[data-action='CONFIGURE']";
+        beforeEach(function () {
+            // this is done since cypress session results in 403 sometimes
+            cy.openAuthoring(pagePath);
+        });
+
+        it('insert Scribble in form container', function () {
+            dropScribbleInContainer();
+            cy.deleteComponentByPath(scribbleDrop);
+        });
+
+        it('verify Basic tab in edit dialog of Scribble', function () {
+            dropScribbleInContainer();
+            cy.openEditableToolbar(sitesSelectors.overlays.overlay.component + scribbleEditPathSelector);
+            cy.invokeEditableAction(editDialogConfigurationSelector);
+            cy.get(scribbleBlockBemSelector + '__editdialog').contains('Validation').click().then(() => {
+                cy.get(scribbleBlockBemSelector + '__editdialog').contains('Help Content').click().then(() => {
+                    cy.get(scribbleBlockBemSelector + '__editdialog').contains('Accessibility').click().then(() => {
+                            cy.get(scribbleBlockBemSelector + '__editdialog').contains('Basic').click().then(() => {
+                                cy.get("[name='./name']").should("exist");
+                                cy.get("[name='./jcr:title']").should("exist");
+                                cy.get("[name='./hideTitle']").should("exist");
+                                cy.get('.cq-dialog-submit').should('be.visible');
+                                cy.get('.cq-dialog-cancel').should('be.visible').click().then(() => {
+                                    cy.deleteComponentByPath(scribbleDrop);
+                            });
+                        });
+                    })  
+                });
+            });
+        });
+    });
+
+    context('Open Sites Editor', function () {
+        const pagePath = "/content/core-components-examples/library/adaptive-form/scribble",
+            scribbleEditPath = pagePath + afConstants.RESPONSIVE_GRID_DEMO_SUFFIX + "/guideContainer/scribble",
+            scribbleEditPathSelector = "[data-path='" + scribbleEditPath + "']",
+            editDialogConfigurationSelector = "[data-action='CONFIGURE']",
+            scribbleDrop = pagePath + afConstants.RESPONSIVE_GRID_DEMO_SUFFIX + '/guideContainer/' + afConstants.components.forms.resourceType.scribble.split("/").pop();
+
+        beforeEach(function () {
+            // this is done since cypress session results in 403 sometimes
+            cy.openAuthoring(pagePath);
+        });
+
+        it('insert aem forms Scribble', function () {
+            dropScribbleInSites();
+            cy.deleteComponentByPath(scribbleDrop);
+        });
+
+        it('open edit dialog of aem forms Scribble', function () {
+            cy.cleanTest(scribbleDrop).then(function () {
+                dropScribbleInSites();
+                cy.openEditableToolbar(sitesSelectors.overlays.overlay.component + scribbleEditPathSelector);
+                cy.invokeEditableAction(editDialogConfigurationSelector);
+                cy.get("[name='./name']").should("exist").then(() => {
+                    cy.get("[name='./jcr:title']").should("exist");
+                    cy.get("[name='./hideTitle']").should("exist");
+                    cy.get('.cq-dialog-submit').should('be.visible');
+                    cy.get('.cq-dialog-cancel').should('be.visible').click().then(() => {
+                        cy.deleteComponentByPath(scribbleDrop);
+                    })
+                })
+            });
+        });
+
+    });
+})      
\ No newline at end of file
diff --git a/ui.tests/test-module/specs/scribble/scribble.runtime.cy.js b/ui.tests/test-module/specs/scribble/scribble.runtime.cy.js
new file mode 100644
index 0000000000..88aec8096c
--- /dev/null
+++ b/ui.tests/test-module/specs/scribble/scribble.runtime.cy.js
@@ -0,0 +1,109 @@
+/*******************************************************************************
+ * Copyright 2025 Adobe
+ *
+ * Licensed 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.
+ ******************************************************************************/
+describe("Form Runtime with Scribble Input", () => {
+
+    const pagePath = "content/forms/af/core-components-it/samples/scribble/basic.html"
+    const bemBlock = "cmp-adaptiveform-scribble"
+
+    let formContainer = null
+
+    beforeEach(() => {
+        cy.previewForm(pagePath).then(p => {
+            formContainer = p;
+        })
+    });
+
+    const checkHTML = (id, state) => {
+        const visible = state.visible;
+        const passVisibleCheck = `${visible === true ? "" : "not."}be.visible`;
+        const passDisabledAttributeCheck = `${state.enabled === false || state.readOnly === true ? "" : "not."}have.attr`;
+        const value = state.value
+        cy.get(`#${id}`)
+            .should(passVisibleCheck)
+            .invoke('attr', 'data-cmp-visible')
+            .should('eq', visible.toString());
+
+        cy.get(`#${id}`)
+            .invoke('attr', 'data-cmp-enabled')
+            .should('eq', state.enabled.toString());
+
+        return cy.get(`#${id}`).within((root) => {
+            cy.get('*').should(passVisibleCheck)
+            cy.get('input')
+                .should('have.length', 1)
+            cy.get('input')
+                .should(passDisabledAttributeCheck, 'disabled');
+            cy.get('input').should('be.checked');
+        })
+    }
+
+    it("should get model and view initialized properly", () => {
+        expect(formContainer, "formcontainer is initialized").to.not.be.null;
+        expect(formContainer._model.items.length, "model and view elements match").to.equal(Object.keys(formContainer._fields).length);
+        Object.entries(formContainer._fields).forEach(([id, field]) => {
+            expect(field.getId()).to.equal(id)
+            expect(formContainer._model.getElement(id), `model and view are in sync`).to.equal(field.getModel())
+        });
+    });
+
+    it("on clicking of text button, user can type signature and save it", () => {
+        cy.get(".cmp-adaptiveform-scribble__canvas-signed-container").click();
+        cy.get('.cmp-adaptiveform-scribble__canvases').should('be.visible');
+        cy.get('button[aria-label="textSign"]').should('be.visible').click(); 
+        cy.get('input[name="signatureText"]').should('be.visible').type('Xyx');
+        cy.get('button[aria-label="save"]').should('not.be.disabled').click();
+        cy.get('.cmp-adaptiveform-scribble__canvas-signed-container').find('img').should('have.attr', 'src');
+    });
+
+    // it('should draw a signature on the canvas using mouse events', () => {
+    //     cy.get('.cmp-adaptiveform-scribble__canvas-signed-container').click();
+    //     cy.get('.cmp-adaptiveform-scribble__canvases').trigger('mousedown', 'center').trigger('mousemove',5,5).trigger('mouseup');
+    //     cy.get('button[aria-label="save"]').should('not.be.disabled').click();
+    //     cy.get('.cmp-adaptiveform-scribble__canvas-signed-container').find('img').should('have.attr', 'src'); 
+    // });
+
+    it('should erase the signature on clicking of eraser icon', () => {
+        cy.get('.cmp-adaptiveform-scribble__canvas-signed-container').click();
+        cy.get('.cmp-adaptiveform-scribble__canvases').trigger('mousedown', 'center').trigger('mousemove',5,5).trigger('mouseup');
+        cy.get('button[aria-label="clearSign"]').should('be.visible').click();
+        cy.get('button[aria-label="save"]').should('be.disabled'); 
+        cy.get('button[aria-label="close"]').click();
+        cy.get('.cmp-adaptiveform-scribble__canvas-signed-container').find('img').should('not.have.attr', 'src'); 
+    });
+
+    // it('Delete button should clear the image', () => {
+    //     cy.get('.cmp-adaptiveform-scribble__canvas-signed-container').click();
+    //     cy.get('.cmp-adaptiveform-scribble__canvases').trigger('mousedown', 'center').trigger('mousemove',5,5).trigger('mouseup');
+    //     cy.get('button[aria-label="save"]').should('not.be.disabled').click();
+    //     cy.get('.cmp-adaptiveform-scribble__canvas-signed-container').find('img').should('have.attr', 'src');
+    //     cy.get('.cmp-adaptiveform-scribble__canvas-signed-container').find('.cmp-adaptiveform-scribble__clear-sign').click(); 
+    //     cy.get('.cmp-adaptiveform-scribble__clearsign-container').find('.cmp-adaptiveform-scribble__button--primary').click();
+    //     cy.get('.cmp-adaptiveform-scribble__canvas-signed-container').find('img').should('not.have.attr', 'src'); 
+    // });
+
+    // it("on clicking of brush button, user can select different grade of pencil for signing the canvas ", () => {
+    //     cy.get(".cmp-adaptiveform-scribble__canvas-signed-container").click();
+    //     cy.get('.cmp-adaptiveform-scribble__canvases').should('be.visible');
+    //     cy.get('button[aria-label="brushes"]').should('be.visible').click(); 
+    //     cy.get('.cmp-adaptiveform-scribble__brushlist').should('be.visible');
+    //     cy.get('.cmp-adaptiveform-scribble__brushlist div').eq(5).click();
+    //     cy.get('.cmp-adaptiveform-scribble__canvases').trigger('mousedown', 'center').trigger('mousemove',5,5).trigger('mouseup');
+    //     cy.get('button[aria-label="save"]').should('not.be.disabled').click();
+    //     cy.get('.cmp-adaptiveform-scribble__canvas-signed-container').find('img').should('have.attr', 'src');
+    // });
+
+
+})
\ No newline at end of file