@wix/patterns 1.414.0 → 1.416.0

package/src/components/EditableTable/cellTypes/datetime/index.ts

@@ -0,0 +1,49 @@
+import { defineCellType } from '../../types';
+import { DateTimeView } from './View';
+import { DateTimeEdit } from './Edit';
+import { DateTimeEditWrapper } from './DateTimeEditWrapper';
+import { toValidDate } from './helpers';
+
+export { DateTimeView, DateTimeEdit };
+
+/**
+ * DateTime — 2-in-1 cell type. Single `Date | null` rendered as two halves
+ * (date | time) with a vertical divider. Each half has its own focus + edit
+ * lifecycle, but only one sub-cell is in edit mode at a time.
+ *
+ * Serialized via ISO 8601 (`toISOString`) — round-trips both date and time
+ * components without timezone surprises in storage. The cell is never in a
+ * "date set, time null" state; an empty time-of-day after a date pick
+ * defaults to 00:00:00.
+ */
+export const dateTimeCellType = defineCellType<Date | null>({
+  type: 'datetime',
+  ViewComponent: DateTimeView,
+  EditComponent: DateTimeEdit,
+  EditWrapper: DateTimeEditWrapper,
+  serialize: (value) => {
+    const date = toValidDate(value);
+    return date ? date.toISOString() : '';
+  },
+  deserialize: (raw) => {
+    if (!raw) {
+      return null;
+    }
+    const date = toValidDate(raw);
+    if (!date) {
+      throw new Error(`Invalid datetime value: "${raw}"`);
+    }
+    return date;
+  },
+  validate: (value) => {
+    if (value == null) {
+      return null;
+    }
+    return toValidDate(value) ? null : 'Invalid date/time';
+  },
+  editable: true,
+  clearable: true,
+  // Forward typed character into the date half (entry default is 'date').
+  // The Edit component opens the calendar and forwards the key.
+  onTypeToEdit: () => ({}),
+});

package/src/components/EditableTable/cellTypes/datetime/mergeDateTime.ts

@@ -0,0 +1,35 @@
+import { isValidDate } from './helpers';
+
+/**
+ * Take the date-part from `newDate` and the time-of-day from `prev`. When
+ * `prev` is null/invalid the merged time-of-day defaults to midnight.
+ */
+export function mergeDate(prev: Date | null, newDate: Date): Date {
+  const next = new Date(newDate);
+  if (isValidDate(prev)) {
+    next.setHours(
+      prev.getHours(),
+      prev.getMinutes(),
+      prev.getSeconds(),
+      prev.getMilliseconds(),
+    );
+  } else {
+    next.setHours(0, 0, 0, 0);
+  }
+  return next;
+}
+
+/**
+ * Take the time-of-day from `newTime` and the date-part from `prev`. When
+ * `prev` is null/invalid the merged date-part defaults to today.
+ */
+export function mergeTime(prev: Date | null, newTime: Date): Date {
+  const base = isValidDate(prev) ? new Date(prev) : new Date();
+  base.setHours(
+    newTime.getHours(),
+    newTime.getMinutes(),
+    newTime.getSeconds(),
+    newTime.getMilliseconds(),
+  );
+  return base;
+}

package/src/components/EditableTable/cellTypes/datetime/subCellContext.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export type SubCell = 'date' | 'time';
+
+interface SubCellClickTracker {
+  /** Read the last clicked sub-cell. Cleared (returns null) after read. */
+  consume: () => SubCell | null;
+  /** Record which sub-cell the user just mousedowned on. */
+  record: (sub: SubCell) => void;
+}
+
+const NOOP_TRACKER: SubCellClickTracker = {
+  consume: () => null,
+  record: () => {},
+};
+
+export const SubCellClickContext =
+  React.createContext<SubCellClickTracker>(NOOP_TRACKER);
+
+export const useSubCellClickTracker = (): SubCellClickTracker =>
+  React.useContext(SubCellClickContext);

package/src/components/EditableTable/cellTypes/email/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3123290408";
+var _namespace_ = "Edit1913083617";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit3123290408__root","emailInput":"Edit3123290408__emailInput"};
+export var classes = {"root":"Edit1913083617__root","emailInput":"Edit1913083617__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1834123324";
+var _namespace_ = "View2963983373";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View1834123324__root"};
+export var classes = {"root":"View2963983373__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/index.ts

@@ -4,6 +4,7 @@ import { numberCellType } from './number';
 import { booleanCellType } from './boolean';
 import { dateCellType } from './date';
 import { timeCellType } from './time';
+import { dateTimeCellType } from './datetime';
 import { urlCellType } from './url';
 import { emailCellType } from './email';
 import { colorCellType } from './color';
@@ -17,6 +18,7 @@ import { audioCellType } from './audio';
 import { richTextCellType } from './richText';
 import { mediaGalleryCellType } from './mediaGallery';
 import { referenceCellType } from './reference';
+import { multiReferenceCellType } from './multiReference';
 import { addressCellType } from './address';
 
 export {
@@ -25,6 +27,7 @@ export {
   booleanCellType,
   dateCellType,
   timeCellType,
+  dateTimeCellType,
   urlCellType,
   emailCellType,
   colorCellType,
@@ -38,6 +41,7 @@ export {
   richTextCellType,
   mediaGalleryCellType,
   referenceCellType,
+  multiReferenceCellType,
   addressCellType,
 };
 
@@ -48,6 +52,7 @@ export const builtInCellTypes: CellType[] = [
   booleanCellType,
   dateCellType,
   timeCellType,
+  dateTimeCellType,
   urlCellType,
   emailCellType,
   colorCellType,
@@ -61,5 +66,6 @@ export const builtInCellTypes: CellType[] = [
   richTextCellType,
   mediaGalleryCellType,
   referenceCellType,
+  multiReferenceCellType,
   addressCellType,
 ];

package/src/components/EditableTable/cellTypes/multiReference/Edit.tsx

@@ -0,0 +1,265 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Box } from '@wix/design-system';
+import {
+  CellMultiReferenceInput,
+  type CellMultiReferenceInputHandle,
+  type CellMultiReferenceItem,
+} from '@wix/patterns-fields';
+import { observer } from 'mobx-react-lite';
+import { useCollection } from '@wix/bex-core/react';
+import type { CellEditProps } from '../../types';
+import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
+import { useFilterCollectionStates } from '../../../../hooks/useFilterCollectionStates';
+import { FilterTranslationProvider } from '../../../../providers';
+import { getImageFieldId } from '../reference/getImageFieldId';
+import { useOpenReferencedCollection } from '../reference/openCollectionContext';
+import type {
+  MultiReferenceValue,
+  ReferenceItem,
+  ReferenceTypeConfig,
+} from './types';
+
+function _MultiReferenceEditContent({
+  value,
+  onChange,
+  onCommit,
+  typeConfig,
+  editTrigger,
+  inputRef,
+}: CellEditProps<MultiReferenceValue>) {
+  const config = typeConfig as ReferenceTypeConfig | undefined;
+  const refSchema = config?.refSchema;
+  const acHandle = useRef<CellMultiReferenceInputHandle | null>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  // Opener provided by ReferenceEditWrapper (a stable ancestor) so the
+  // navigation + return-to-foreground subscription survive this editor
+  // unmounting when the overlay opens.
+  const openReferencedCollection = useOpenReferencedCollection();
+
+  const idField = refSchema?.idField ?? '_id';
+  const displayField = refSchema?.displayField ?? 'title';
+  const imageField = getImageFieldId(refSchema?.fields);
+
+  const collection = useCollection<ReferenceItem>({
+    queryName: `multi-reference-cell-edit-${refSchema?.id ?? 'unknown'}`,
+    itemKey: (item) => item.id,
+    itemName: (item) => item.name,
+    fetchData: async (query) => {
+      if (!config?.fetchReferenceItems) {
+        return { items: [], total: 0 };
+      }
+      return config.fetchReferenceItems(query);
+    },
+  });
+
+  const initialSearchTextRef = useRef(
+    editTrigger &&
+      typeof editTrigger === 'object' &&
+      editTrigger.kind === 'type'
+      ? editTrigger.key
+      : undefined,
+  );
+
+  useEffect(() => {
+    const dispose = collection.init();
+    if (initialSearchTextRef.current !== undefined) {
+      collection.search(initialSearchTextRef.current, { clearResult: true });
+    }
+    // Seed editingValue with the current value so a no-op edit commits the same
+    // list back instead of `undefined` (which would clear the cell).
+    onChange(value ?? []);
+    return dispose;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [collection]);
+
+  const selectedRefs = value ?? [];
+
+  const selectedItems = useMemo<CellMultiReferenceItem[]>(
+    () =>
+      selectedRefs.map((ref, i) => ({
+        id: String(ref[idField] ?? i),
+        name: String(ref[displayField] ?? ''),
+        image: imageField ? (ref[imageField] as string | undefined) : undefined,
+      })),
+    [selectedRefs, idField, displayField, imageField],
+  );
+
+  const selectedIds = useMemo(
+    () => new Set(selectedItems.map((item) => item.id)),
+    [selectedItems],
+  );
+
+  const keyedItems = collection.result.keyedItems;
+  const fetchedLastPage = collection.fetchedLastPage;
+  const searchValue = collection.query.search.value;
+
+  // Exclude already-selected references from the dropdown options.
+  const items = useMemo<CellMultiReferenceItem[]>(
+    () =>
+      keyedItems
+        .map((ki) => ({
+          id: String(ki.key),
+          name: ki.item.name,
+          image: ki.item.image,
+        }))
+        .filter((item) => !selectedIds.has(item.id)),
+    [keyedItems, selectedIds],
+  );
+
+  const handleSelect = useCallback(
+    (item: CellMultiReferenceItem) => {
+      const next = [
+        ...selectedRefs,
+        {
+          [idField]: item.id,
+          [displayField]: item.name,
+          ...(imageField && item.image ? { [imageField]: item.image } : {}),
+        },
+      ];
+      onChange(next);
+      collection.clearSearch();
+    },
+    [selectedRefs, idField, displayField, imageField, onChange, collection],
+  );
+
+  const handleRemoveTag = useCallback(
+    (id: string) => {
+      const next = selectedRefs.filter(
+        (ref) => String(ref[idField] ?? '') !== id,
+      );
+      onChange(next.length ? next : null);
+    },
+    [selectedRefs, idField, onChange],
+  );
+
+  const handleSearchChange = useCallback(
+    (search: string) => {
+      if (search) {
+        collection.search(search, { clearResult: true });
+      } else {
+        collection.clearSearch();
+      }
+    },
+    [collection],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      // Production should commit (not revert) on Escape — close the editor and
+      // keep the current selection. Stop propagation so the framework's default
+      // cancel-on-Escape doesn't also fire.
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        onCommit();
+      }
+    },
+    [onCommit],
+  );
+
+  const closeDropdown = useCallback(() => acHandle.current?.hideOptions(), []);
+  useCloseOnAncestorScroll(wrapperRef, closeDropdown, true);
+
+  // Commit on blur, unless focus moved into the portaled dropdown / popover.
+  const handleBlur = useCallback(() => {
+    requestAnimationFrame(() => {
+      const active = document.activeElement as HTMLElement | null;
+      if (!active) {
+        onCommit();
+        return;
+      }
+      if (wrapperRef.current?.contains(active)) {
+        return;
+      }
+      if (
+        active.closest(
+          '[role="listbox"], [role="dialog"], [data-hook*="popover"]',
+        )
+      ) {
+        return;
+      }
+      onCommit();
+    });
+  }, [onCommit]);
+
+  // Click-outside fallback. Empty cells often never get a focused descendant,
+  // so onBlur on the wrapper never fires.
+  useEffect(() => {
+    const handleDocMouseDown = (e: MouseEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (!target) {
+        return;
+      }
+      if (wrapperRef.current?.contains(target)) {
+        return;
+      }
+      if (
+        target.closest?.(
+          '[role="listbox"], [role="dialog"], [data-hook*="popover"]',
+        )
+      ) {
+        return;
+      }
+      onCommit();
+    };
+    document.addEventListener('mousedown', handleDocMouseDown);
+    return () => document.removeEventListener('mousedown', handleDocMouseDown);
+  }, [onCommit]);
+
+  const { showInitialLoader, fixedFooter } = useFilterCollectionStates({
+    collection,
+    fixedFooter: config?.renderFooter?.(),
+  });
+
+  // Refresh this editor's dropdown options when the overlay closes — force
+  // invalidates the shared query cache (keyed by queryName), so even after this
+  // editor has unmounted the next open refetches fresh.
+  const handleOpenCollection = useMemo(
+    () =>
+      openReferencedCollection
+        ? () =>
+            openReferencedCollection(() =>
+              collection.clearResultAndMoveToStart({ force: true }),
+            )
+        : undefined,
+    [openReferencedCollection, collection],
+  );
+
+  if (!refSchema) {
+    return null;
+  }
+
+  return (
+    <Box ref={wrapperRef} width="100%" height="100%">
+      <CellMultiReferenceInput
+        ref={acHandle}
+        items={items}
+        selectedItems={selectedItems}
+        value={searchValue}
+        onChange={handleSearchChange}
+        onSelect={handleSelect}
+        onRemoveTag={handleRemoveTag}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        infiniteScroll
+        hasMore={!showInitialLoader && !fetchedLastPage}
+        loadMore={collection.fetchNextPageIfNeeded}
+        fixedFooter={fixedFooter}
+        onOpenCollection={handleOpenCollection}
+        autoOpen={!!editTrigger}
+        inputRef={inputRef}
+        dataHook="multi-reference-edit"
+      />
+    </Box>
+  );
+}
+
+const MultiReferenceEditContent = observer(_MultiReferenceEditContent);
+
+export const MultiReferenceEdit = (
+  props: CellEditProps<MultiReferenceValue>,
+) => (
+  <FilterTranslationProvider>
+    <MultiReferenceEditContent {...props} />
+  </FilterTranslationProvider>
+);

package/src/components/EditableTable/cellTypes/multiReference/Edit.uni.driver.ts

@@ -0,0 +1,52 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+const { fireEvent = null } =
+  process.env.NODE_ENV === 'test'
+    ? (() => {
+        try {
+          return require('@testing-library/react');
+        } catch {}
+        return {};
+      })()
+    : {};
+
+export function MultiReferenceEditUniDriver(base: UniDriver, body: UniDriver) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const getNativeInput = () =>
+    (base.$('input') as any).getNative() as Promise<HTMLInputElement>;
+
+  return {
+    ...baseUniDriverFactory(base),
+    hasInput: () => base.$('input').exists(),
+    getInputValue: () => base.$('input').value(),
+    getTagsCount: () =>
+      base.$$('[data-hook="multi-reference-edit-tag"]').count(),
+    typeInInput: async (value: string) => {
+      fireEvent.change(await getNativeInput(), { target: { value } });
+    },
+    pressKeyOnInput: async (key: string) => {
+      fireEvent.keyDown(await getNativeInput(), { key });
+    },
+    // Dropdown options are portal-mounted to document.body, so search in body.
+    getOptionCount: async () =>
+      body.$$('[data-hook="list-item-select"]').count(),
+    getOptionTitleByIndex: async (index: number) => {
+      const option = await body.$$('[data-hook="list-item-select"]').get(index);
+      return option.$('[data-hook="list-item-select-title"]').text();
+    },
+    clickOptionByIndex: async (index: number) => {
+      const option = await body.$$('[data-hook="list-item-select"]').get(index);
+      return option.click();
+    },
+    hasOpenCollectionButton: () =>
+      body.$('[data-hook="reference-open-collection"]').exists(),
+    clickOpenCollection: async () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const el = (
+        body.$('[data-hook="reference-open-collection"]') as any
+      ).getNative() as Promise<HTMLElement>;
+      fireEvent.click(await el);
+    },
+  };
+}

package/src/components/EditableTable/cellTypes/multiReference/View.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { CellMultiReferenceView } from '@wix/patterns-fields';
+import type { CellMultiReferenceItem } from '@wix/patterns-fields';
+import type { CellViewProps } from '../../types';
+import { getImageFieldId } from '../reference/getImageFieldId';
+import type { MultiReferenceValue, ReferenceTypeConfig } from './types';
+
+export const MultiReferenceView: React.FC<
+  CellViewProps<MultiReferenceValue>
+> = ({ value, typeConfig, columnId, rowKey }) => {
+  const config = typeConfig as ReferenceTypeConfig | undefined;
+  const refs = value ?? [];
+  if (refs.length === 0 || !config?.refSchema) {
+    return null;
+  }
+
+  const { displayField, idField } = config.refSchema;
+  const imageField = getImageFieldId(config.refSchema.fields);
+
+  const items: CellMultiReferenceItem[] = refs.map((ref, i) => ({
+    id: String(ref[idField] ?? i),
+    name: String(ref[displayField] ?? ''),
+    image: imageField ? (ref[imageField] as string | undefined) : undefined,
+  }));
+
+  return (
+    <CellMultiReferenceView
+      items={items}
+      dataHook="multi-reference-view"
+      fieldId={`multi-reference-view-${columnId}-${rowKey}`}
+    />
+  );
+};

package/src/components/EditableTable/cellTypes/multiReference/View.uni.driver.ts

@@ -0,0 +1,16 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function MultiReferenceViewUniDriver(base: UniDriver, _body: UniDriver) {
+  const tags = () => base.$$('[data-hook="cell-multi-reference-tag"]');
+  const overflow = () => base.$('[data-hook="tag-list-overflow-chip"]');
+  return {
+    ...baseUniDriverFactory(base),
+    hasTags: async () => (await tags().count()) > 0,
+    getTagsCount: () => tags().count(),
+    isEmpty: async () =>
+      !(await base.$('[data-hook="cell-multi-reference-tags"]').exists()),
+    hasOverflowChip: () => overflow().exists(),
+    getOverflowChipText: async () => (await overflow().text()) ?? '',
+  };
+}

package/src/components/EditableTable/cellTypes/multiReference/index.ts

@@ -0,0 +1,41 @@
+import { defineCellType } from '../../types';
+import { ReferenceEditWrapper } from '../reference/ReferenceEditWrapper';
+import { MultiReferenceView } from './View';
+import { MultiReferenceEdit } from './Edit';
+import type { MultiReferenceValue } from './types';
+
+export { MultiReferenceView, MultiReferenceEdit };
+export type {
+  MultiReferenceValue,
+  ReferenceItem,
+  RefSchema,
+  ReferenceTypeConfig,
+} from './types';
+
+export const multiReferenceCellType = defineCellType<MultiReferenceValue>({
+  type: 'multiReference',
+  ViewComponent: MultiReferenceView,
+  EditComponent: MultiReferenceEdit,
+  EditWrapper: ReferenceEditWrapper,
+  // Compact, single-line JSON for clipboard TSV (no pretty-printing).
+  serialize: (value) => (value && value.length ? JSON.stringify(value) : ''),
+  deserialize: (raw) => {
+    if (!raw) {
+      return null;
+    }
+    try {
+      const parsed = JSON.parse(raw);
+      if (Array.isArray(parsed)) {
+        return parsed;
+      }
+    } catch {}
+    return null;
+  },
+  editable: true,
+  clearable: true,
+  // Single click opens the chip editor (parity with the UX handoff).
+  editOnClick: () => true,
+  // Enter edit on a printable key without clearing the existing chips — the
+  // MultiSelect input takes over typing once edit opens.
+  onTypeToEdit: () => ({}),
+});

package/src/components/EditableTable/cellTypes/multiReference/types.ts

@@ -0,0 +1,15 @@
+import type {
+  ReferenceItem,
+  RefSchema,
+  ReferenceTypeConfig,
+} from '../reference/types';
+
+export type { ReferenceItem, RefSchema, ReferenceTypeConfig };
+
+/**
+ * A multi-reference cell holds an array of denormalized reference objects —
+ * the plural sibling of the `reference` cell's `Record<string, unknown> | null`.
+ * Each object carries the schema's `idField`, `displayField` and (optionally)
+ * the image field, so the view renders without re-fetching.
+ */
+export type MultiReferenceValue = Record<string, unknown>[] | null;

package/src/components/EditableTable/cellTypes/number/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2307432173";
+var _namespace_ = "Edit3213260238";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit2307432173__root","numberInput":"Edit2307432173__numberInput"};
+export var classes = {"root":"Edit3213260238__root","numberInput":"Edit3213260238__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1217882159";
+var _namespace_ = "View1484387196";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View1217882159__root","textView":"View1217882159__textView"};
+export var classes = {"root":"View1484387196__root","textView":"View1484387196__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit4161391252";
+var _namespace_ = "Edit490034775";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit4161391252__root","jsonInput":"Edit4161391252__jsonInput"};
+export var classes = {"root":"Edit490034775__root","jsonInput":"Edit490034775__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};