@blokkli/editor 2.0.0-alpha.1 → 2.0.0-alpha.11

package/dist/runtime/components/BlokkliField.vue.d.ts

@@ -1,56 +1,14 @@
-import { type ComputedRef } from '#imports';
 import type { BlokkliFragmentName } from '#blokkli-build/definitions';
-import BlokkliItem from './BlokkliItem.vue.js';
-import type { FieldListItem, EntityContext, BlokkliProviderEntityContext } from '#blokkli/types';
+import type { FieldListItem } from '#blokkli/types';
 import type { ValidFieldListTypes, FieldListItemTyped } from '#blokkli-build/generated-types';
-declare const DraggableList: import("vue").DefineComponent<{
-    name: string;
-    fieldKey: string;
-    list: FieldListItem[];
-    entity: EntityContext;
-    language?: string;
-    tag?: string;
-    isNested: boolean;
-    fieldListType: string;
-    allowedFragments?: BlokkliFragmentName[];
-    dropAlignment?: "vertical" | "horizontal";
-    proxyMode?: boolean;
-    globalProxyMode?: boolean;
-    nestingLevel: number;
-    shouldRenderItem?: (item: FieldListItem | FieldListItemTyped) => boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    name: string;
-    fieldKey: string;
-    list: FieldListItem[];
-    entity: EntityContext;
-    language?: string;
-    tag?: string;
-    isNested: boolean;
-    fieldListType: string;
-    allowedFragments?: BlokkliFragmentName[];
-    dropAlignment?: "vertical" | "horizontal";
-    proxyMode?: boolean;
-    globalProxyMode?: boolean;
-    nestingLevel: number;
-    shouldRenderItem?: (item: FieldListItem | FieldListItemTyped) => boolean;
-}> & Readonly<{}>, {
-    allowedFragments: BlokkliFragmentName[];
-    tag: string;
-    language: string;
-    dropAlignment: "vertical" | "horizontal";
-    shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any> | null;
-declare const attrs: {
-    [x: string]: unknown;
+type __VLS_Slots = {
+    default(props: {
+        items: FieldListItemTyped[];
+    }): any;
+    after(props: {
+        items: FieldListItemTyped[];
+    }): any;
 };
-declare const isEditing = false;
-declare const isGlobalProxyMode: ComputedRef<boolean> | null;
-declare const isInReusable = false;
-declare const isPreview: ComputedRef<boolean> | null;
-declare const isNested = false;
-declare const nestingLevel: number;
-declare const entity: EntityContext | undefined;
-declare const providerEntity: ComputedRef<BlokkliProviderEntityContext>;
 type __VLS_Props = {
     name: string;
     list?: Array<FieldListItem | null | undefined> | FieldListItem | null;
@@ -71,48 +29,6 @@ type __VLS_Props = {
      */
     shouldRenderItem?: (item: FieldListItem | FieldListItemTyped) => boolean;
 };
-declare const canEdit: import("vue").Ref<boolean, boolean>;
-declare const fieldKey: ComputedRef<string | undefined>;
-declare const fieldListType: ComputedRef<"default">;
-declare const filteredList: ComputedRef<FieldListItemTyped[]>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_1: {
-    items: FieldListItemTyped[];
-}, __VLS_14: {
-    items: FieldListItemTyped[];
-};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_1) => any;
-} & {
-    after?: (props: typeof __VLS_14) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
-    BlokkliItem: typeof BlokkliItem;
-    DraggableList: typeof DraggableList;
-    attrs: typeof attrs;
-    isEditing: typeof isEditing;
-    isGlobalProxyMode: typeof isGlobalProxyMode;
-    isInReusable: typeof isInReusable;
-    isPreview: typeof isPreview;
-    isNested: typeof isNested;
-    nestingLevel: typeof nestingLevel;
-    entity: typeof entity;
-    providerEntity: typeof providerEntity;
-    canEdit: typeof canEdit;
-    fieldKey: typeof fieldKey;
-    fieldListType: typeof fieldListType;
-    filteredList: typeof filteredList;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    list: Array<FieldListItem | null | undefined> | FieldListItem | null;
-    fieldListType: ValidFieldListTypes;
-    allowedFragments: BlokkliFragmentName[];
-    tag: string;
-    dropAlignment: "vertical" | "horizontal";
-    shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
-    listClass: string;
-    editClass: string;
-    nonEmptyClass: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     list: Array<FieldListItem | null | undefined> | FieldListItem | null;
     fieldListType: ValidFieldListTypes;

package/dist/runtime/components/BlokkliItem.vue

@@ -12,7 +12,7 @@
     :is="component"
     v-else-if="component"
     v-bind="props"
-    :data-bk-in-proxy="fieldUsesProxy || void 0"
+    :data-bk-in-proxy="fieldUsesProxy || (isEditing ? 'false' : void 0)"
   />
   <div v-else-if="isEditing">Block not implemented</div>
 </template>

package/dist/runtime/components/BlokkliProvider.vue

@@ -72,6 +72,7 @@ import {
   INJECT_ENTITY_CONTEXT,
   INJECT_PROVIDER_CONTEXT
 } from "../helpers/symbols";
+defineSlots();
 const PreviewProvider = defineAsyncComponent(
   () => import("./Edit/PreviewProvider.vue")
 );
@@ -106,7 +107,7 @@ const isEditing = computed(
   () => props.canEdit && !!props.entityUuid && route.query.blokkliEditing === props.entityUuid
 );
 const isPreviewing = computed(
-  () => props.entityUuid && route.query.blokkliPreview === props.entityUuid
+  () => !!props.entityUuid && route.query.blokkliPreview === props.entityUuid
 );
 const showIndicator = computed(
   () => props.canEdit && !route.query.blokkliEditing && !route.query.blokkliPreview

package/dist/runtime/components/BlokkliProvider.vue.d.ts

@@ -1,4 +1,4 @@
-declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const _default: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & {
         entity?: T;
         entityType: string;
@@ -17,28 +17,12 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
-        default?: (((props: {
-            entity: any;
+        default(props: {
             isEditing: boolean;
             canEdit: boolean;
-            isPreview: true;
-        }) => any) & ((props: {
-            isEditing: true;
-            canEdit: boolean;
-            isPreview: false | "";
-            entity: any;
-        }) => any) & ((props: {
-            isEditing: boolean;
-            canEdit: boolean;
-            isPreview: boolean | "";
-            entity: [{
-                type: import("vue").PropType<__VLS_NonUndefinedable<T>>;
-                default: undefined;
-            }] extends [import("vue").Prop<infer V, infer D>] ? unknown extends V ? keyof V extends never ? import("@vue/shared").IfAny<V, V, D> : V : V : {
-                type: import("vue").PropType<__VLS_NonUndefinedable<T>>;
-                default: undefined;
-            };
-        }) => any)) | undefined;
+            isPreview: boolean;
+            entity?: T | undefined;
+        }): any;
     };
     emit: {};
 }>) => import("vue").VNode & {
@@ -48,4 +32,3 @@ export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T]: T[K];
 } & {};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/runtime/components/Edit/Actions/index.vue

@@ -75,7 +75,7 @@ import {
 import { onlyUnique, findIdealRectPosition, falsy } from "#blokkli/helpers";
 import { ItemIcon, Icon } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-const { selection, $t, types, state, ui, dom, definitions } = useBlokkli();
+const { selection, $t, types, state, ui, dom, definitions, debug } = useBlokkli();
 const editingEnabled = computed(
   () => state.editMode.value === "editing" || state.editMode.value === "translating"
 );
@@ -100,6 +100,9 @@ const title = computed(() => {
   if (ui.transformLabel.value) {
     return ui.transformLabel.value;
   }
+  if (debug.isEnabled.value && selection.uuids.value.length === 1) {
+    return selection.uuids.value[0];
+  }
   if (itemBundle.value) {
     if (itemBundle.value.id === "blokkli_fragment") {
       const fragments = selection.uuids.value.map((uuid) => {

package/dist/runtime/components/Edit/BlockProxy/index.vue

@@ -34,6 +34,7 @@ import { computed, useBlokkli, ref } from "#imports";
 import { getBlokkliItemProxyComponent } from "#blokkli/helpers/editComponents";
 import { ItemIcon } from "#blokkli/components";
 import { buildAttributesForLibraryItem, falsy } from "#blokkli/helpers";
+import { useBlockRegistration } from "#blokkli/helpers/composables/useBlockRegistration";
 const props = defineProps({
   uuid: { type: String, required: true },
   bundle: { type: String, required: true },
@@ -63,7 +64,7 @@ const rootProps = computed(() => {
 const proxyBundle = computed(
   () => libraryItemProps.value?.block?.bundle || props.bundle
 );
-const { types, runtimeConfig, definitions } = useBlokkli();
+const { types, runtimeConfig, definitions, dom } = useBlokkli();
 const root = ref(null);
 const type = computed(() => types.getBlockBundleDefinition(proxyBundle.value));
 const proxyComponent = getBlokkliItemProxyComponent(proxyBundle.value);
@@ -89,4 +90,5 @@ const fieldLayout = computed(() => {
   }
   return types.fieldConfig.forEntityTypeAndBundle(runtimeConfig.itemEntityType, proxyBundle.value).map((config) => [config]);
 });
+useBlockRegistration(dom, props.uuid);
 </script>

package/dist/runtime/components/Edit/BlokkliErrorBoundary.vue

@@ -15,17 +15,17 @@
         <div class="bk-fatal-error-overlay-info">
           <Icon name="sad" />
           <div>
-            <h2>{{ $t('fatalErrorTitle', 'bl\xF6kkli has stopped working') }}</h2>
+            <h2>{{ $t("fatalErrorTitle", "bl\xF6kkli has stopped working") }}</h2>
             <p>
               {{
                 $t(
-  'fatalErrorText',
-  'Unfortunately bl\xF6kkli has encountered a fatal error which prevents it from working normally. You may be able to continue using it, but things may not work as expected.'
+  "fatalErrorText",
+  "Unfortunately bl\xF6kkli has encountered a fatal error which prevents it from working normally. You may be able to continue using it, but things may not work as expected."
 )
               }}
             </p>
             <button class="bk-button bk-is-danger" @click="errors = []">
-              {{ $t('fatalErrorButton', 'Continue anyway...') }}
+              {{ $t("fatalErrorButton", "Continue anyway...") }}
             </button>
           </div>
         </div>

package/dist/runtime/components/Edit/BlokkliErrorBoundary.vue.d.ts

@@ -1,18 +1,7 @@
-import { Icon } from '#blokkli/components';
-declare const errors: import("vue").Ref<Error[], Error[]>;
-declare const $t: import("#blokkli/helpers/textProvider").TextProvider;
-declare const unique: import("vue").ComputedRef<Error[]>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<{}, {
-    Icon: typeof Icon;
-    errors: typeof errors;
-    $t: typeof $t;
-    unique: typeof unique;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/components/Edit/Dialog/index.vue.d.ts

@@ -34,7 +34,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     submitLabel: string;
     canSubmit: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: ((props: {}) => any) | undefined;
+    default?: (props: {}) => any;
 }>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/Edit/DragInteractions/index.vue

@@ -38,7 +38,7 @@ function getInteractedElement(e) {
     if (!(el instanceof HTMLElement)) {
       continue;
     }
-    if (el.dataset.blokkliEditableField) {
+    if (el.dataset.blokkliEditableField && !el.closest('[data-bk-in-proxy="true"]')) {
       editableFieldName = el.dataset.blokkliEditableField;
     }
     if (el instanceof HTMLTableCellElement) {

package/dist/runtime/components/Edit/EditProvider.vue

@@ -12,14 +12,14 @@
       <div v-if="!state.stateAvailable.value" class="bk-state-unavailable">
         <h2>
           {{
-            $t('stateUnavailableTitle', 'The edit state could not be loaded.')
+            $t("stateUnavailableTitle", "The edit state could not be loaded.")
           }}
         </h2>
         <p>
           {{
             $t(
-  'stateUnavailableText',
-  'This could be due to missing permissions or a temporary problem. Please try again later.'
+  "stateUnavailableText",
+  "This could be due to missing permissions or a temporary problem. Please try again later."
 )
           }}
         </p>
@@ -94,6 +94,7 @@ import {
   INJECT_GLOBAL_PROXY_MODE,
   INJECT_IS_EDITING
 } from "#blokkli/helpers/symbols";
+import { useBlockRegistration } from "#blokkli/helpers/composables/useBlockRegistration";
 const props = defineProps({
   entity: { type: null, required: false, default: void 0 },
   entityType: { type: String, required: true },
@@ -102,6 +103,7 @@ const props = defineProps({
   language: { type: String, required: false, default: "en" },
   isolate: { type: Boolean, required: false }
 });
+defineSlots();
 const context = computed(() => {
   return {
     entityType: props.entityType,
@@ -183,7 +185,8 @@ provide(INJECT_EDIT_CONTEXT, {
   eventBus,
   mutatedOptions: state.mutatedOptions,
   dom,
-  definitions
+  definitions,
+  useBlockRegistration
 });
 provide(INJECT_APP, {
   adapter,

package/dist/runtime/components/Edit/EditProvider.vue.d.ts

@@ -11,10 +11,10 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
-        default?: ((props: {
+        default(props: {
+            mutatedEntity: T;
             key: string;
-            mutatedEntity: any;
-        }) => any) | undefined;
+        }): any;
     };
     emit: {};
 }>) => import("vue").VNode & {

package/dist/runtime/components/Edit/Features/Artboard/index.vue

@@ -180,7 +180,35 @@ const artboard = getArtboard();
 watch(options, function(newOptions) {
   artboard.setOptions(newOptions);
 });
-onBlokkliEvent("animationFrame:before", (time) => {
+const AUTOSCROLL_EDGE_ZONE = 130;
+const AUTOSCROLL_SPEED = 12;
+let autoScrollSpeed = 1;
+function edgeStep(distance) {
+  const ratio = distance / AUTOSCROLL_EDGE_ZONE;
+  return Math.pow(ratio, 3) * AUTOSCROLL_SPEED;
+}
+onBlokkliEvent("animationFrame:before", ({ time, mouseY }) => {
+  if (selection.isDragging.value) {
+    const viewportHeight = ui.viewport.value.height;
+    const currentOffset = artboard.getOffset();
+    const y = Math.min(Math.max(mouseY, 0), viewportHeight);
+    let dy = 0;
+    if (y < AUTOSCROLL_EDGE_ZONE) {
+      const dist = AUTOSCROLL_EDGE_ZONE - y;
+      dy = edgeStep(dist);
+    } else if (y > viewportHeight - AUTOSCROLL_EDGE_ZONE) {
+      const dist = y - (viewportHeight - AUTOSCROLL_EDGE_ZONE);
+      dy = -edgeStep(dist);
+    } else {
+      autoScrollSpeed = 1;
+    }
+    if (dy !== 0) {
+      artboard.setOffset(null, currentOffset.y + dy * autoScrollSpeed);
+      autoScrollSpeed = Math.min(autoScrollSpeed * 1.01, 2.25);
+    }
+  } else {
+    autoScrollSpeed = 1;
+  }
   artboard.loop(time);
   const artboardSize = artboard.getArtboardSize();
   if (artboardSize) {

package/dist/runtime/components/Edit/Features/Assistant/Overlay/index.vue

@@ -10,13 +10,13 @@
         <p class="bk-lead">
           {{
             $t(
-  \"assistantDialogLead\",
-  \"Please enter what you"d like the assistant to generate.\"
+  "assistantDialogLead",
+  "Please enter what you'd like the assistant to generate."
 )
           }}
         </p>
         <label class="bk-form-label" for="assistant_prompt">
-          {{ $t('assistantPromptLabel', 'Prompt') }}
+          {{ $t("assistantPromptLabel", "Prompt") }}
         </label>
         <div class="bk-assistant-form-textarea">
           <textarea
@@ -56,7 +56,7 @@
     </div>
     <template #footer>
       <button class="bk-button bk-is-primary" @click="onSubmit">
-        {{ $t('assistantDialogSubmit', 'Create blocks') }}
+        {{ $t("assistantDialogSubmit", "Create blocks") }}
       </button>
     </template>
   </FormOverlay>

package/dist/runtime/components/Edit/Features/Assistant/index.vue

@@ -30,7 +30,8 @@ const { adapter } = defineBlokkliFeature({
     "assistantGetResults",
     "assistantAddBlockFromResult"
   ],
-  screenshot: "feature-assistant.jpg"
+  screenshot: "feature-assistant.jpg",
+  dependencies: ["add-list"]
 });
 const { state, $t } = useBlokkli();
 const placedAction = ref(null);

package/dist/runtime/components/Edit/Features/Clipboard/index.vue

@@ -19,7 +19,7 @@
         v-if="!pastedItems.length"
         class="bk bk-clipboard-info bk-sidebar-padding"
       >
-        <h4>{{ $t('clipboardEmpty', 'No items in the clipboard') }}</h4>
+        <h4>{{ $t("clipboardEmpty", "No items in the clipboard") }}</h4>
         <div
           v-if="!ui.isMobile.value"
           v-html="

package/dist/runtime/components/Edit/Features/Comments/AddForm/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="bk-blokkli-item-actions-comment-dropdown" @keydown.capture.stop>
     <label for="comment_body" class="bk-form-label">{{
-      $t('commentBody', 'Comment')
+      $t("commentBody", "Comment")
     }}</label>
     <textarea
       id="comment_body"
@@ -12,7 +12,7 @@
       required
     />
     <button class="bk-button bk-is-primary" @click="$emit('add', comment)">
-      {{ $t('commentSave', 'Submit comment') }}
+      {{ $t("commentSave", "Submit comment") }}
     </button>
   </div>
 </template>

package/dist/runtime/components/Edit/Features/Comments/Comment/index.vue

@@ -14,7 +14,7 @@
       @click.capture.stop="$emit('resolve')"
     >
       <Icon name="check" />
-      <span>{{ $t('commentsMarkAsResolved', 'Resolve') }}</span>
+      <span>{{ $t("commentsMarkAsResolved", "Resolve") }}</span>
     </button>
   </div>
 </template>

package/dist/runtime/components/Edit/Features/Comments/Overlay/Item/index.vue

@@ -28,7 +28,7 @@
         <span
           >{{ comments.length }}
           {{
-            comments.length === 1 ? $t('singleComment', 'comment') : $t('comments', 'Comments')
+            comments.length === 1 ? $t("singleComment", "comment") : $t("comments", "Comments")
           }}</span
         >
       </div>
@@ -49,7 +49,7 @@
           class="bk-button bk-is-primary bk-is-small"
           @click="addComment"
         >
-          {{ $t('commentAdd', 'Add comment') }}
+          {{ $t("commentAdd", "Add comment") }}
         </button>
       </div>
     </div>

package/dist/runtime/components/Edit/Features/Diff/DiffView/index.vue

@@ -3,10 +3,10 @@
     <table class="bk-diff-table">
       <thead>
         <tr>
-          <th>{{ $t('diffTableChange', 'Change') }}</th>
-          <th>{{ $t('diffTableBundle', 'Type') }}</th>
-          <th>{{ $t('diffTableProperty', 'Property') }}</th>
-          <th>{{ $t('diffTableDiff', 'Diff') }}</th>
+          <th>{{ $t("diffTableChange", "Change") }}</th>
+          <th>{{ $t("diffTableBundle", "Type") }}</th>
+          <th>{{ $t("diffTableProperty", "Property") }}</th>
+          <th>{{ $t("diffTableDiff", "Diff") }}</th>
         </tr>
       </thead>
       <tbody>
@@ -20,16 +20,16 @@
                 v-if="item.status === 'added'"
                 class="bk-diff-status-label bk-is-added"
               >
-                {{ $t('diffStatusAdded', 'Added') }}
+                {{ $t("diffStatusAdded", "Added") }}
               </div>
               <div
                 v-else-if="item.status === 'removed'"
                 class="bk-diff-status-label bk-is-removed"
               >
-                {{ $t('diffStatusDeleted', 'Deleted') }}
+                {{ $t("diffStatusDeleted", "Deleted") }}
               </div>
               <div v-else class="bk-diff-status-label">
-                {{ $t('diffStatusEdited', 'Edited') }}
+                {{ $t("diffStatusEdited", "Edited") }}
               </div>
             </td>
             <td