@measured/puck 0.10.0-canary.74cd3a7 → 0.10.0-canary.8d47fd7

package/dist/index.d.ts

@@ -111,14 +111,14 @@ type ArrayState = {
     items: ItemWithId[];
     openId: string;
 };
-type AppState = {
+type UiState = {
     leftSideBarVisible: boolean;
     itemSelector?: ItemSelector | null;
     arrayState: Record<string, ArrayState | undefined>;
 };
-type AppData = {
+type AppState = {
     data: Data;
-    state: AppState;
+    ui: UiState;
 };
 
 declare const Button: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, icon, size, }: {
@@ -171,8 +171,8 @@ type RemoveAction = {
     zone: string;
 };
 type SetStateAction = {
-    type: "setState";
-    state: Partial<AppState>;
+    type: "setUi";
+    ui: Partial<UiState>;
 };
 type SetDataAction = {
     type: "setData";
@@ -180,7 +180,7 @@ type SetDataAction = {
 };
 type SetAction = {
     type: "set";
-    appData: Partial<AppData>;
+    state: Partial<AppState>;
 };
 type RegisterZoneAction = {
     type: "registerZone";
@@ -195,9 +195,9 @@ type PuckAction = {
 } & (ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetAction | SetDataAction | SetStateAction | RegisterZoneAction | UnregisterZoneAction);
 
 type PathData = Record<string, {
-    selector: ItemSelector | null;
+    path: string[];
     label: string;
-}[]>;
+}>;
 type DropZoneContext = {
     data: Data;
     config: Config;
@@ -292,4 +292,4 @@ declare const FieldLabel: ({ children, icon, label, }: {
     label: string;
 }) => react_jsx_runtime.JSX.Element;
 
-export { Adaptor, AppData, AppState, ArrayState, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, ItemWithId, Puck, Render, dropZoneContext };
+export { Adaptor, AppState, ArrayState, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, ItemWithId, MappedItem, Puck, Render, UiState, dropZoneContext };

package/dist/index.js

@@ -2646,7 +2646,7 @@ var getZoneId = (zoneCompound) => {
   if (zoneCompound && zoneCompound.indexOf(":") > -1) {
     return zoneCompound.split(":");
   }
-  return ["root", zoneCompound];
+  return [rootDroppableId, zoneCompound];
 };
 
 // components/DropZone/context.tsx
@@ -2713,15 +2713,15 @@ var DropZoneProvider = ({
       }
       const [area] = getZoneId(selector.zone);
       setPathData((latestPathData = {}) => {
-        const pathData2 = latestPathData[area] || [];
+        const parentPathData = latestPathData[area] || { path: [] };
         return __spreadProps(__spreadValues({}, latestPathData), {
-          [item.props.id]: [
-            ...pathData2,
-            {
-              selector,
-              label: item.type
-            }
-          ]
+          [item.props.id]: {
+            path: [
+              ...parentPathData.path,
+              ...selector.zone ? [selector.zone] : []
+            ],
+            label: item.type
+          }
         });
       });
     },
@@ -3090,7 +3090,7 @@ var IconButton = ({
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_react_beautiful_dnd5 = require("react-beautiful-dnd");
 
 // components/InputOrGroup/index.tsx
@@ -3175,26 +3175,28 @@ var DragIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { class
 // components/Puck/context.tsx
 init_react_import();
 var import_react24 = require("react");
-var defaultAppData = {
+var defaultAppState = {
   data: { content: [], root: { title: "" } },
-  state: {
+  ui: {
     leftSideBarVisible: true,
     arrayState: {}
   }
 };
 var appContext = (0, import_react24.createContext)({
-  appData: defaultAppData,
+  state: defaultAppState,
   dispatch: () => null
 });
 var AppProvider = appContext.Provider;
 var useAppContext = () => {
   const mainContext = (0, import_react24.useContext)(appContext);
+  const selectedItem = mainContext.state.ui.itemSelector ? getItem(mainContext.state.ui.itemSelector, mainContext.state.data) : void 0;
   return __spreadProps(__spreadValues({}, mainContext), {
-    // Helper
-    setState: (state, recordHistory) => {
+    // Helpers
+    selectedItem,
+    setUi: (ui, recordHistory) => {
       return mainContext.dispatch({
-        type: "setState",
-        state,
+        type: "setUi",
+        ui,
         recordHistory
       });
     }
@@ -3214,8 +3216,8 @@ var ArrayField = ({
   label
 }) => {
   const [arrayFieldId] = (0, import_react25.useState)(generateId("ArrayField"));
-  const { appData, setState } = useAppContext();
-  const arrayState = appData.state.arrayState[arrayFieldId] || {
+  const { state, setUi } = useAppContext();
+  const arrayState = state.ui.arrayState[arrayFieldId] || {
     items: Array.from(value).map((v) => ({
       _arrayId: generateId("ArrayItem"),
       data: v
@@ -3224,9 +3226,9 @@ var ArrayField = ({
   };
   const setArrayState = (0, import_react25.useCallback)(
     (newArrayState, recordHistory = false) => {
-      setState(
+      setUi(
         {
-          arrayState: __spreadProps(__spreadValues({}, appData.state.arrayState), {
+          arrayState: __spreadProps(__spreadValues({}, state.ui.arrayState), {
             [arrayFieldId]: __spreadValues(__spreadValues({}, arrayState), newArrayState)
           })
         },
@@ -3447,12 +3449,17 @@ var ExternalInput = ({
   const [data, setData] = (0, import_react26.useState)([]);
   const [isOpen, setOpen] = (0, import_react26.useState)(false);
   const [selectedData, setSelectedData] = (0, import_react26.useState)(value);
-  const keys = (0, import_react26.useMemo)(
-    () => Object.keys(data).filter(
-      (key) => typeof data[key] === "string" || typeof data[key] === "number"
-    ),
-    [data]
-  );
+  const keys = (0, import_react26.useMemo)(() => {
+    const validKeys = /* @__PURE__ */ new Set();
+    for (const item of data) {
+      for (const key of Object.keys(item)) {
+        if (typeof item[key] === "string" || typeof item[key] === "number") {
+          validKeys.add(key);
+        }
+      }
+    }
+    return Array.from(validKeys);
+  }, [data]);
   (0, import_react26.useEffect)(() => {
     (() => __async(void 0, null, function* () {
       if (field.adaptor) {
@@ -3847,6 +3854,72 @@ var Heading = ({ children, rank, size = "m" }) => {
   );
 };
 
+// lib/use-breadcrumbs.ts
+init_react_import();
+var import_react28 = require("react");
+var convertPathDataToBreadcrumbs = (selectedItem, pathData, data) => {
+  const id = selectedItem ? selectedItem == null ? void 0 : selectedItem.props.id : "";
+  const currentPathData = pathData && id && pathData[id] ? __spreadValues({}, pathData[id]) : { label: "Page", path: [] };
+  if (!id) {
+    return [];
+  }
+  return currentPathData == null ? void 0 : currentPathData.path.reduce((acc, zoneCompound) => {
+    const [area] = getZoneId(zoneCompound);
+    if (area === rootDroppableId) {
+      return [
+        {
+          label: "Page",
+          selector: null
+        }
+      ];
+    }
+    const parentZoneCompound = acc.length > 0 ? acc[acc.length - 1].zoneCompound : rootDroppableId;
+    let parentZone = data.content;
+    if (parentZoneCompound && parentZoneCompound !== rootDroppableId) {
+      parentZone = data.zones[parentZoneCompound];
+    }
+    if (!parentZone) {
+      return acc;
+    }
+    const itemIndex = parentZone.findIndex(
+      (queryItem) => queryItem.props.id === area
+    );
+    const item = parentZone[itemIndex];
+    if (!item) {
+      return acc;
+    }
+    return [
+      ...acc,
+      {
+        label: item.type.toString(),
+        selector: {
+          index: itemIndex,
+          zone: parentZoneCompound
+        },
+        zoneCompound
+      }
+    ];
+  }, []);
+};
+var useBreadcrumbs = (renderCount) => {
+  const {
+    state: { data },
+    selectedItem
+  } = useAppContext();
+  const dzContext = (0, import_react28.useContext)(dropZoneContext);
+  return (0, import_react28.useMemo)(() => {
+    const breadcrumbs = convertPathDataToBreadcrumbs(
+      selectedItem,
+      dzContext == null ? void 0 : dzContext.pathData,
+      data
+    );
+    if (renderCount) {
+      return breadcrumbs.slice(breadcrumbs.length - renderCount);
+    }
+    return breadcrumbs;
+  }, [selectedItem, dzContext == null ? void 0 : dzContext.pathData, renderCount]);
+};
+
 // components/SidebarSection/index.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var getClassName16 = get_class_name_factory_default("SidebarSection", styles_module_default8);
@@ -3854,23 +3927,24 @@ var SidebarSection = ({
   children,
   title,
   background,
-  breadcrumbs = [],
-  breadcrumbClick,
+  showBreadcrumbs,
   noPadding
 }) => {
+  const { setUi } = useAppContext();
+  const breadcrumbs = useBreadcrumbs(1);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16({ noPadding }), style: { background }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("title"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16("breadcrumbs"), children: [
-      breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16("breadcrumb"), children: [
+      showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16("breadcrumb"), children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "div",
           {
             className: getClassName16("breadcrumbLabel"),
-            onClick: () => breadcrumbClick && breadcrumbClick(breadcrumb),
+            onClick: () => setUi({ itemSelector: breadcrumb.selector }),
             children: breadcrumb.label
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(chevron_right_default, { size: 16 })
-      ] }, i)),
+      ] }, i)) : null,
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Heading, { rank: 2, size: "xs", children: title }) })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("content"), children })
@@ -3882,15 +3956,15 @@ init_react_import();
 
 // lib/use-puck-history.ts
 init_react_import();
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // lib/use-action-history.ts
 init_react_import();
-var import_react28 = require("react");
+var import_react29 = require("react");
 var EMPTY_HISTORY_INDEX = -1;
 function useActionHistory() {
-  const [histories, setHistories] = (0, import_react28.useState)([]);
-  const [currentHistoryIndex, setCurrentHistoryIndex] = (0, import_react28.useState)(EMPTY_HISTORY_INDEX);
+  const [histories, setHistories] = (0, import_react29.useState)([]);
+  const [currentHistoryIndex, setCurrentHistoryIndex] = (0, import_react29.useState)(EMPTY_HISTORY_INDEX);
   const currentHistory = histories[currentHistoryIndex];
   const canRewind = currentHistoryIndex > EMPTY_HISTORY_INDEX;
   const canForward = currentHistoryIndex < histories.length - 1;
@@ -3934,35 +4008,40 @@ var import_use_debounce2 = require("use-debounce");
 var DEBOUNCE_TIME = 250;
 var RECORD_DIFF = "RECORD_DIFF";
 var historyEmitter = (0, import_event_emitter.default)();
-var recordDiff = (newAppData) => historyEmitter.emit(RECORD_DIFF, newAppData);
-var _recordHistory = ({ snapshot, newSnapshot, record, dispatch }) => {
+var recordDiff = (newAppState) => historyEmitter.emit(RECORD_DIFF, newAppState);
+var _recordHistory = ({
+  snapshot,
+  newSnapshot,
+  record,
+  dispatch
+}) => {
   record({
     forward: () => {
-      dispatch({ type: "set", appData: newSnapshot });
+      dispatch({ type: "set", state: newSnapshot });
     },
     rewind: () => {
-      dispatch({ type: "set", appData: snapshot });
+      dispatch({ type: "set", state: snapshot });
     }
   });
 };
 function usePuckHistory({
-  appData,
+  appState,
   dispatch
 }) {
   const { canForward, canRewind, rewind, forward, record } = useActionHistory();
   (0, import_react_hotkeys_hook.useHotkeys)("meta+z", rewind, { preventDefault: true });
   (0, import_react_hotkeys_hook.useHotkeys)("meta+shift+z", forward, { preventDefault: true });
   (0, import_react_hotkeys_hook.useHotkeys)("meta+y", forward, { preventDefault: true });
-  const [snapshot] = (0, import_use_debounce2.useDebounce)(appData, DEBOUNCE_TIME);
-  const handleRecordDiff = (0, import_use_debounce2.useDebouncedCallback)((newAppData) => {
+  const [snapshot] = (0, import_use_debounce2.useDebounce)(appState, DEBOUNCE_TIME);
+  const handleRecordDiff = (0, import_use_debounce2.useDebouncedCallback)((newAppState) => {
     return _recordHistory({
       snapshot,
-      newSnapshot: newAppData,
+      newSnapshot: newAppState,
       record,
       dispatch
     });
   }, DEBOUNCE_TIME);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     historyEmitter.on(RECORD_DIFF, handleRecordDiff);
     return () => {
       historyEmitter.off(RECORD_DIFF, handleRecordDiff);
@@ -4252,11 +4331,11 @@ var reduceData = (data, action, config) => {
 
 // reducer/state.ts
 init_react_import();
-var reduceState = (state, action) => {
-  if (action.type === "setState") {
-    return __spreadValues(__spreadValues({}, state), action.state);
+var reduceState = (ui, action) => {
+  if (action.type === "setUi") {
+    return __spreadValues(__spreadValues({}, ui), action.ui);
   }
-  return state;
+  return ui;
 };
 
 // reducer/actions.tsx
@@ -4264,8 +4343,8 @@ init_react_import();
 
 // reducer/index.ts
 var storeInterceptor = (reducer) => {
-  return (appData, action) => {
-    const newAppData = reducer(appData, action);
+  return (state, action) => {
+    const newAppState = reducer(state, action);
     const isValidType = ![
       "registerZone",
       "unregisterZone",
@@ -4274,18 +4353,18 @@ var storeInterceptor = (reducer) => {
       "set"
     ].includes(action.type);
     if (typeof action.recordHistory !== "undefined" ? action.recordHistory : isValidType) {
-      recordDiff(newAppData);
+      recordDiff(newAppState);
     }
-    return newAppData;
+    return newAppState;
   };
 };
-var createReducer = ({ config }) => storeInterceptor((appData, action) => {
-  const data = reduceData(appData.data, action, config);
-  const state = reduceState(appData.state, action);
+var createReducer = ({ config }) => storeInterceptor((state, action) => {
+  const data = reduceData(state.data, action, config);
+  const ui = reduceState(state.ui, action);
   if (action.type === "set") {
-    return __spreadValues(__spreadValues({}, appData), action.appData);
+    return __spreadValues(__spreadValues({}, state), action.state);
   }
-  return { data, state };
+  return { data, ui };
 });
 
 // components/LayerTree/index.tsx
@@ -4307,7 +4386,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // lib/find-zones-for-area.ts
 init_react_import();
@@ -4326,12 +4405,9 @@ init_react_import();
 var isChildOfZone = (item, maybeChild, ctx) => {
   var _a;
   const { data, pathData = {} } = ctx || {};
-  return maybeChild && data ? !!((_a = pathData[maybeChild.props.id]) == null ? void 0 : _a.find((path) => {
-    if (path.selector) {
-      const pathItem = getItem(path.selector, data);
-      return (pathItem == null ? void 0 : pathItem.props.id) === item.props.id;
-    }
-    return false;
+  return maybeChild && data ? !!((_a = pathData[maybeChild.props.id]) == null ? void 0 : _a.path.find((zoneCompound) => {
+    const [area] = getZoneId(zoneCompound);
+    return area === item.props.id;
   })) : false;
 };
 
@@ -4348,7 +4424,7 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = (0, import_react30.useContext)(dropZoneContext);
+  const ctx = (0, import_react31.useContext)(dropZoneContext);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: getClassName17("zoneTitle"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName17("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(layers_default, { size: "16" }) }),
@@ -4456,19 +4532,19 @@ var areaContainsZones = (data, area) => {
 
 // lib/flush-zones.ts
 init_react_import();
-var flushZones = (appData) => {
-  const containsZones = typeof appData.data.zones !== "undefined";
+var flushZones = (appState) => {
+  const containsZones = typeof appState.data.zones !== "undefined";
   if (containsZones) {
-    Object.keys(appData.data.zones || {}).forEach((zone) => {
-      addToZoneCache(zone, appData.data.zones[zone]);
+    Object.keys(appState.data.zones || {}).forEach((zone) => {
+      addToZoneCache(zone, appState.data.zones[zone]);
     });
-    return __spreadProps(__spreadValues({}, appData), {
-      data: __spreadProps(__spreadValues({}, appData.data), {
+    return __spreadProps(__spreadValues({}, appState), {
+      data: __spreadProps(__spreadValues({}, appState.data), {
         zones: {}
       })
     });
   }
-  return appData;
+  return appState;
 };
 
 // components/Puck/index.tsx
@@ -4499,35 +4575,31 @@ function Puck({
   headerPath
 }) {
   var _a, _b;
-  const [reducer] = (0, import_react31.useState)(() => createReducer({ config }));
-  const initialAppData = {
-    data: initialData,
-    state: {
-      leftSideBarVisible: true,
-      arrayState: {}
-    }
-  };
-  const [appData, dispatch] = (0, import_react31.useReducer)(
+  const [reducer] = (0, import_react32.useState)(() => createReducer({ config }));
+  const initialAppState = __spreadProps(__spreadValues({}, defaultAppState), {
+    data: initialData
+  });
+  const [appState, dispatch] = (0, import_react32.useReducer)(
     reducer,
-    flushZones(initialAppData)
+    flushZones(initialAppState)
   );
-  const { data, state } = appData;
+  const { data, ui } = appState;
   const { canForward, canRewind, rewind, forward } = usePuckHistory({
-    appData,
+    appState,
     dispatch
   });
-  const { itemSelector, leftSideBarVisible } = state;
-  const setItemSelector = (0, import_react31.useCallback)(
+  const { itemSelector, leftSideBarVisible } = ui;
+  const setItemSelector = (0, import_react32.useCallback)(
     (newItemSelector) => {
       dispatch({
-        type: "setState",
-        state: { itemSelector: newItemSelector }
+        type: "setUi",
+        ui: { itemSelector: newItemSelector }
       });
     },
     []
   );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  const Page = (0, import_react31.useCallback)(
+  const Page = (0, import_react32.useCallback)(
     (pageProps) => {
       var _a2, _b2;
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -4542,7 +4614,7 @@ function Puck({
     },
     [config.root]
   );
-  const PageFieldWrapper = (0, import_react31.useCallback)(
+  const PageFieldWrapper = (0, import_react32.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       PluginRenderer,
       {
@@ -4554,7 +4626,7 @@ function Puck({
     ),
     []
   );
-  const ComponentFieldWrapper = (0, import_react31.useCallback)(
+  const ComponentFieldWrapper = (0, import_react32.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       PluginRenderer,
       {
@@ -4569,13 +4641,13 @@ function Puck({
   const FieldWrapper = itemSelector ? ComponentFieldWrapper : PageFieldWrapper;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
   let fields = selectedItem ? ((_b = config.components[selectedItem.type]) == null ? void 0 : _b.fields) || {} : rootFields;
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (onChange)
       onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [draggedItem, setDraggedItem] = (0, import_react31.useState)();
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "puck", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AppProvider, { value: { appData, dispatch }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const [draggedItem, setDraggedItem] = (0, import_react32.useState)();
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "puck", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AppProvider, { value: { state: appState, dispatch }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     import_react_beautiful_dnd5.DragDropContext,
     {
       onDragUpdate: (update) => {
@@ -4642,11 +4714,6 @@ function Puck({
             areaId: "root"
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(dropZoneContext.Consumer, { children: (ctx) => {
-            let path = (ctx == null ? void 0 : ctx.pathData) && selectedItem ? ctx == null ? void 0 : ctx.pathData[selectedItem == null ? void 0 : selectedItem.props.id] : void 0;
-            if (path) {
-              path = [{ label: "Page", selector: null }, ...path];
-              path = path.slice(path.length - 2, path.length - 1);
-            }
             return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
               "div",
               {
@@ -4707,8 +4774,8 @@ function Puck({
                                   IconButton,
                                   {
                                     onClick: () => dispatch({
-                                      type: "setState",
-                                      state: {
+                                      type: "setUi",
+                                      ui: {
                                         leftSideBarVisible: !leftSideBarVisible
                                       }
                                     }),
@@ -4904,8 +4971,7 @@ function Puck({
                         SidebarSection,
                         {
                           noPadding: true,
-                          breadcrumbs: path,
-                          breadcrumbClick: (breadcrumb) => setItemSelector(breadcrumb.selector),
+                          showBreadcrumbs: true,
                           title: selectedItem ? selectedItem.type : "Page",
                           children: Object.keys(fields).map((fieldName) => {
                             var _a2, _b2, _c, _d;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.10.0-canary.74cd3a7",
+  "version": "0.10.0-canary.8d47fd7",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",