@plasmicapp/host 1.0.134 → 1.0.138

package/registerComponent/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../src/registerComponent.ts"],"sourcesContent":["import {\n  CodeComponentElement,\n  CSSProperties,\n  PlasmicElement,\n} from \"./element-types\";\n\nconst root = globalThis as any;\n\nexport interface CanvasComponentProps<Data = any> {\n  /**\n   * This prop is only provided within the canvas of Plasmic Studio.\n   * Allows the component to set data to be consumed by the props' controls.\n   */\n  setControlContextData?: (data: Data) => void;\n}\n\ntype InferDataType<P> = P extends CanvasComponentProps<infer Data> ? Data : any;\n\nexport type ControlExtras = { path: (string | number)[] };\n\n/**\n * Context that we pass back to control functions.\n */\nexport type ControlContext<P> = [\n  /**\n   * props\n   */\n  P,\n  /**\n   * `contextData` can be `null` if the prop controls are rendering before\n   * the component instance itself (it will re-render once the component\n   * calls `setControlContextData`)\n   */\n  InferDataType<P> | null,\n  /**\n   * Extra information for the control to use\n   */\n  ControlExtras\n];\n\n/**\n * Config option that takes the context (e.g., props) of the component instance\n * to dynamically set its value.\n */\nexport type ContextDependentConfig<P, R> = (...args: ControlContext<P>) => R;\n\nexport interface PropTypeBase<P> {\n  displayName?: string;\n  description?: string;\n  helpText?: string;\n  /**\n   * If the user has chosen to use a dynamic expression for this prop, provide\n   * a hint as to the expected values that the expression should evaluate to.\n   * This hint will be displayed alongside the code editor.  You may use\n   * markdown in the text here.\n   */\n  exprHint?: string;\n  /**\n   * Function for whether this prop should be hidden in the right panel,\n   * given the current props for this component\n   */\n  hidden?: ContextDependentConfig<P, boolean>;\n  readOnly?: boolean | ContextDependentConfig<P, boolean>;\n  /**\n   * If true, will hide the prop in a collapsed section; good for props that\n   * should not usually be used.\n   */\n  advanced?: boolean;\n  /**\n   * If true, does not allow the user to use a dynamic expression for this prop\n   */\n  disableDynamicValue?: boolean;\n  /**\n   * If set to true, the component will be remounted when the prop value is updated.\n   * (This behavior only appliees to canvas)\n   */\n  forceRemount?: boolean;\n}\n\nexport type DefaultValueOrExpr<P, T> =\n  | {\n      defaultExpr?: undefined;\n      defaultExprHint?: undefined;\n      defaultValue?: T;\n      defaultValueHint?: T | ContextDependentConfig<P, T | undefined>;\n    }\n  | {\n      defaultValue?: undefined;\n      defaultValueHint?: undefined;\n      defaultExpr?: string;\n      defaultExprHint?: string;\n    };\n\ntype StringTypeBase<P> = PropTypeBase<P> & DefaultValueOrExpr<P, string>;\n\nexport type StringType<P> =\n  | \"string\"\n  | ((\n      | {\n          type: \"string\";\n          control?: \"default\" | \"large\";\n        }\n      | {\n          type: \"code\";\n          lang: \"css\" | \"html\" | \"javascript\" | \"json\";\n        }\n      | {\n          type: \"richText\";\n        }\n      | {\n          type: \"color\";\n          /**\n           * If specified, and the user picks a color token in the Studio, then\n           * the value passed in as prop is a css variable reference, like\n           * `var(--TOKEN_ID)`, instead of the resolved hex value of the token.\n           * You should take care in using this in the proper css context --\n           * the css token is only defined if you are rendering under some\n           * Plasmic component in the DOM tree, which is usually the case,\n           * unless you are using a React portal.\n           */\n          keepCssVar?: boolean;\n        }\n      | {\n          type: \"class\";\n          /**\n           * Additional css selectors that can change how this style should look.\n           * Some examples:\n           *\n           * * `:hover` -- on hover\n           * * `[data-something=\"blah\"] -- when the element with this class has\n           *   an html attribute \"data-something=blah\"\n           * * :component[data-something=\"blah\"] :self -- when the root of the\n           *   component has an html attribute \"data-something=blah\". Note that\n           *   the non-standard `:component` selector is used to select the\n           *   component root, and the non-standard `:self` selector is used\n           *   to select the element that this class is attached to.\n           */\n          selectors?: {\n            /**\n             * A css selector, like `:hover` or `[data-something=\"blah\"]`.\n             */\n            selector: string;\n            /**\n             * An optional human-friendly label for the selector, so the studio user\n             * knows what this selector means.\n             */\n            label?: string;\n          }[];\n          /**\n           * If specified, then only shows these style sections for styling this class\n           */\n          styleSections?: StyleSection[];\n        }\n      | {\n          type: \"themeResetClass\";\n          /**\n           * Normally, theme reset class will only target Plasmic-generated tags\n           * with the default tag styles. If you also want to target non-Plasmic-generated\n           * tags (say, rendered by your code components, or fetched as an HTML blob\n           * from somewhere), then specify `true` here.\n           */\n          targetAllTags?: boolean;\n        }\n      | {\n          type: \"cardPicker\";\n          modalTitle?:\n            | React.ReactNode\n            | ContextDependentConfig<P, React.ReactNode>;\n          options:\n            | {\n                value: string;\n                label?: string;\n                imgUrl: string;\n                footer?: React.ReactNode;\n              }[]\n            | ContextDependentConfig<\n                P,\n                {\n                  value: string;\n                  label?: string;\n                  imgUrl: string;\n                  footer?: React.ReactNode;\n                }[]\n              >;\n          showInput?: boolean | ContextDependentConfig<P, boolean>;\n          onSearch?: ContextDependentConfig<\n            P,\n            ((value: string) => void) | undefined\n          >;\n        }\n    ) &\n      StringTypeBase<P>);\n\nexport type BooleanType<P> =\n  | \"boolean\"\n  | ({\n      type: \"boolean\";\n    } & DefaultValueOrExpr<P, boolean> &\n      PropTypeBase<P>);\n\ntype GraphQLValue = {\n  query: string;\n  variables?: Record<string, any>;\n};\n\nexport type GraphQLType<P> = {\n  type: \"code\";\n  lang: \"graphql\";\n  endpoint: string | ContextDependentConfig<P, string>;\n  method?: string | ContextDependentConfig<P, string>;\n  headers?: object | ContextDependentConfig<P, object>;\n} & DefaultValueOrExpr<P, GraphQLValue> &\n  PropTypeBase<P>;\n\ntype NumberTypeBase<P> = PropTypeBase<P> &\n  DefaultValueOrExpr<P, number> & {\n    type: \"number\";\n  };\n\nexport type NumberType<P> =\n  | \"number\"\n  | ((\n      | {\n          control?: \"default\";\n          min?: number | ContextDependentConfig<P, number>;\n          max?: number | ContextDependentConfig<P, number>;\n        }\n      | {\n          control: \"slider\";\n          min: number | ContextDependentConfig<P, number>;\n          max: number | ContextDependentConfig<P, number>;\n          step?: number | ContextDependentConfig<P, number>;\n        }\n    ) &\n      NumberTypeBase<P>);\n\n/**\n * Expects defaultValue to be a JSON-compatible value\n */\nexport type JSONLikeType<P> =\n  | \"object\"\n  | ({\n      type: \"object\";\n      fields?: {\n        [p: string]: PropType<P>;\n      };\n      /**\n       * Optional function that generates a name for this item in the array\n       */\n      nameFunc?: (item: any, ...args: ControlContext<P>) => string | undefined;\n    } & DefaultValueOrExpr<P, any> &\n      PropTypeBase<P>)\n  | ({\n      type: \"array\";\n      itemType?: {\n        type: \"object\";\n        fields: {\n          [p: string]: PropType<P>;\n        };\n        /**\n         * Optional function that generates a name for this item in the array\n         */\n        nameFunc?: (\n          item: any,\n          ...args: ControlContext<P>\n        ) => string | undefined;\n      };\n      /**\n       * Optional function that determines whether the user can delete a given item.\n       */\n      unstable__canDelete?: (item: any, ...args: ControlContext<P>) => boolean;\n      /**\n       * Specify how to let Plasmic know how to update its own internal representation of the data when the value has\n       * changed, or when issuing a minimalValue or shownValue that is different.\n       *\n       * Important to specify this if you are expecting any nested expression values in this data type!\n       */\n      unstable__keyFunc?: (item: any) => any;\n      /**\n       * Specify what would be the tentative new value that is set if the user makes any changes.\n       *\n       * Useful for field mappings.\n       *\n       * For instance, consider a Table where we have a `fields` prop:\n       *\n       * - Initially, the value is undefined. But if the user makes any changes, we would want to save an array of at\n       *   least three items (corresponding to, say, three columns inferred from a schema).\n       *\n       * - Let's say there are 5 columns in the value. The data schema changes, removing a column and adding two new\n       *   ones. Now we would want a different minimal value, containing 6 items.\n       */\n      unstable__minimalValue?: ContextDependentConfig<P, any>;\n    } & DefaultValueOrExpr<P, any[]> &\n      PropTypeBase<P>)\n  | ({\n      type: \"dataSource\";\n      dataSource: \"airtable\" | \"cms\";\n    } & PropTypeBase<P>);\n\ntype DataPickerValueType = string | number | (string | number)[];\n\nexport type DataPickerType<P> =\n  | ({\n      type: \"dataSelector\";\n      data:\n        | Record<string, any>\n        | ContextDependentConfig<P, Record<string, any>>;\n      alwaysShowValuePathAsLabel?: boolean;\n    } & DefaultValueOrExpr<P, DataPickerValueType> &\n      PropTypeBase<P>)\n  | ({\n      type: \"exprEditor\";\n      data:\n        | Record<string, any>\n        | ContextDependentConfig<P, Record<string, any>>;\n    } & DefaultValueOrExpr<P, DataPickerValueType> &\n      PropTypeBase<P>);\n\nexport type FormValidationRulesType<P> = {\n  type: \"formValidationRules\";\n} & DefaultValueOrExpr<P, any> &\n  PropTypeBase<P>;\n\nexport type EventHandlerType<P> = {\n  type: \"eventHandler\";\n  argTypes: { name: string; type: PropType<any> }[];\n} & DefaultValueOrExpr<P, (...args: any) => any> &\n  PropTypeBase<P>;\n\ninterface ChoiceTypeBase<P> extends PropTypeBase<P> {\n  type: \"choice\";\n  options:\n    | string[]\n    | {\n        label: string;\n        value: string | number | boolean;\n      }[]\n    | ContextDependentConfig<\n        P,\n        | string[]\n        | {\n            label: string;\n            value: string | number | boolean;\n          }[]\n      >;\n  allowSearch?: boolean;\n  filterOption?: boolean;\n  onSearch?: ContextDependentConfig<P, ((value: string) => void) | undefined>;\n}\n\nexport type ChoiceType<P> = (\n  | ({\n      multiSelect?: false;\n    } & DefaultValueOrExpr<P, string | number | boolean>)\n  | ({\n      multiSelect: true;\n    } & DefaultValueOrExpr<P, (string | number | boolean)[]>)\n  | ({\n      multiSelect: ContextDependentConfig<P, boolean>;\n    } & DefaultValueOrExpr<\n      P,\n      string | number | boolean | (string | number | boolean)[]\n    >)\n) &\n  ChoiceTypeBase<P>;\n\nexport interface ModalProps {\n  show?: boolean;\n  children?: React.ReactNode;\n  onClose: () => void;\n  style?: CSSProperties;\n}\n\ninterface CustomControlProps<P> {\n  componentProps: P;\n  /**\n   * `contextData` can be `null` if the prop controls are rendering before\n   * the component instance itself (it will re-render once the component\n   * calls `setControlContextData`)\n   */\n  contextData: InferDataType<P> | null;\n  value: any;\n  /**\n   * Sets the value to be passed to the prop. Expects a JSON-compatible value.\n   */\n  updateValue: (newVal: any) => void;\n  /**\n   * Full screen modal component\n   */\n  FullscreenModal: React.ComponentType<ModalProps>;\n  /**\n   * Modal component for the side pane\n   */\n  SideModal: React.ComponentType<ModalProps>;\n\n  /**\n   * The document that the component will be rendered into; instead of using\n   * `document` directly (for, say, `document.querySelector()` etc.), you\n   * should use this instead.\n   */\n  studioDocument: typeof document;\n}\nexport type CustomControl<P> = React.ComponentType<CustomControlProps<P>>;\n\n/**\n * Expects defaultValue to be a JSON-compatible value\n */\nexport type CustomType<P> =\n  | CustomControl<P>\n  | ({\n      type: \"custom\";\n      control: CustomControl<P>;\n    } & PropTypeBase<P> &\n      DefaultValueOrExpr<P, any>);\n\ntype SlotType<P> =\n  | \"slot\"\n  | ({\n      type: \"slot\";\n      /**\n       * The unique names of all code components that can be placed in the slot\n       */\n      allowedComponents?: string[];\n      /**\n       * Whether the \"empty slot\" placeholder should be hidden in the canvas.\n       */\n      hidePlaceholder?: boolean;\n      /**\n       * Whether the slot is repeated, i.e., is rendered multiple times using\n       * repeatedElement().\n       */\n      isRepeated?: boolean;\n\n      /**\n       * A nicer, human-readable display name for your slot prop\n       */\n      displayName?: string;\n\n      /**\n       * Function for whether this slot should be hidden from the left tree,\n       * given the current props for this component\n       */\n      hidden?: ContextDependentConfig<P, boolean>;\n\n      /**\n       * If slot is a render prop (accepts a function that takes in some\n       * arguments and returns some JSX), then specify the names of the\n       * arguments expected by the render prop function.\n       */\n      renderPropParams?: string[];\n\n      /**\n       * When inserting top-level \"page sections\", should this slot be the default target?\n       */\n      unstable__isMainContentSlot?: boolean;\n    } & Omit<\n      DefaultValueOrExpr<P, PlasmicElement | PlasmicElement[]>,\n      \"defaultValueHint\" | \"defaultExpr\" | \"defaultExprHint\"\n    >);\n\ntype ImageUrlType<P> =\n  | \"imageUrl\"\n  | ({\n      type: \"imageUrl\";\n    } & DefaultValueOrExpr<P, string> &\n      PropTypeBase<P>);\n\nexport type PrimitiveType<P = any> = Extract<\n  StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P>,\n  string\n>;\n\ntype ControlTypeBase =\n  | {\n      editOnly?: false;\n    }\n  | {\n      editOnly: true;\n      /**\n       * The prop where the values should be mapped to\n       */\n      uncontrolledProp?: string;\n    };\n\nexport type SupportControlled<T> =\n  | Extract<T, string | CustomControl<any>>\n  | (Exclude<T, string | CustomControl<any>> & ControlTypeBase);\n\nexport type PropType<P> =\n  | SupportControlled<\n      | StringType<P>\n      | BooleanType<P>\n      | NumberType<P>\n      | JSONLikeType<P>\n      | ChoiceType<P>\n      | ImageUrlType<P>\n      | CustomType<P>\n      | GraphQLType<P>\n      | DataPickerType<P>\n      | FormValidationRulesType<P>\n      | EventHandlerType<P>\n    >\n  | SlotType<P>;\n\ntype RestrictPropType<T, P> = T extends string\n  ? SupportControlled<\n      | StringType<P>\n      | ChoiceType<P>\n      | JSONLikeType<P>\n      | ImageUrlType<P>\n      | CustomType<P>\n      | DataPickerType<P>\n    >\n  : T extends boolean\n  ? SupportControlled<\n      BooleanType<P> | JSONLikeType<P> | CustomType<P> | DataPickerType<P>\n    >\n  : T extends number\n  ? SupportControlled<\n      NumberType<P> | JSONLikeType<P> | CustomType<P> | DataPickerType<P>\n    >\n  : PropType<P>;\n\nexport interface ActionProps<P> {\n  componentProps: P;\n  /**\n   * `contextData` can be `null` if the prop controls are rendering before\n   * the component instance itself (it will re-render once the component\n   * calls `setControlContextData`)\n   */\n  contextData: InferDataType<P> | null;\n  studioOps: {\n    showModal: (\n      modalProps: Omit<ModalProps, \"onClose\"> & { onClose?: () => void }\n    ) => void;\n    refreshQueryData: () => void;\n    appendToSlot: (element: PlasmicElement, slotName: string) => void;\n    removeFromSlotAt: (pos: number, slotName: string) => void;\n    updateProps: (newValues: any) => void;\n  };\n  /**\n   * The document that the component will be rendered into; instead of using\n   * `document` directly (for, say, `document.querySelector()` etc.), you\n   * should use this instead.\n   */\n  studioDocument: typeof document;\n}\n\nexport type Action<P> =\n  | {\n      type: \"button-action\";\n      label: string;\n      onClick: (props: ActionProps<P>) => void;\n    }\n  | {\n      type: \"custom-action\";\n      control: React.ComponentType<ActionProps<P>>;\n    };\n\ntype DistributedKeyOf<T> = T extends any ? keyof T : never;\n\ninterface ComponentTemplate<P>\n  extends Omit<CodeComponentElement<P>, \"type\" | \"name\"> {\n  /**\n   * A preview picture for the template.\n   */\n  previewImg?: string;\n}\n\nexport interface ComponentTemplates<P> {\n  [name: string]: ComponentTemplate<P>;\n}\n\nexport type StateSpec = {\n  onChangeProp: string;\n} & (\n  | {\n      type: \"readonly\";\n      variableType: \"text\";\n      initVal?: string;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"number\";\n      initVal?: number;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"boolean\";\n      initVal?: boolean;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"array\";\n      initVal?: any[];\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"object\";\n      initVal?: object;\n    }\n  | {\n      type: \"writable\";\n      variableType: \"text\" | \"number\" | \"boolean\" | \"array\" | \"object\";\n      valueProp: string;\n    }\n);\n\nexport interface StateHelpers<P, T> {\n  initFunc?: ($props: P) => T;\n  onChangeArgsToValue?: (...args: any) => T;\n}\n\nexport type ComponentHelpers<P> = {\n  states: Record<string, StateHelpers<P, any>>;\n};\n\nexport type ExternalComponentHelpers<P> = {\n  helpers: ComponentHelpers<P>;\n  importPath: string;\n} & (\n  | {\n      importName: string;\n    }\n  | {\n      isDefaultExport: true;\n    }\n);\n\nexport type StyleSection =\n  | \"visibility\"\n  | \"typography\"\n  | \"sizing\"\n  | \"spacing\"\n  | \"background\"\n  | \"transform\"\n  | \"transitions\"\n  | \"layout\"\n  | \"overflow\"\n  | \"border\"\n  | \"shadows\"\n  | \"effects\";\n\nexport interface CodeComponentMeta<P> {\n  /**\n   * Any unique string name used to identify that component. Each component\n   * should be registered with a different `meta.name`, even if they have the\n   * same name in the code.\n   */\n  name: string;\n  /**\n   * The name to be displayed for the component in Studio. Optional: if not\n   * specified, `meta.name` is used.\n   */\n  displayName?: string;\n  /**\n   * The description of the component to be shown in Studio.\n   */\n  description?: string;\n  /**\n   * The javascript name to be used when generating code. Optional: if not\n   * provided, `meta.name` is used.\n   */\n  importName?: string;\n  /**\n   * An object describing the component properties to be used in Studio.\n   * For each `prop`, there should be an entry `meta.props[prop]` describing\n   * its type.\n   */\n  props: { [prop in DistributedKeyOf<P>]?: RestrictPropType<P[prop], P> } & {\n    [prop: string]: PropType<P>;\n  };\n  /**\n   * An object describing the component states to be used in Studio.\n   */\n  states?: Record<string, StateSpec>;\n  /**\n   * An object describing the components helpers to be used in Studio.\n   *   1. states helpers: Each state can receive an \"initFunc\" prop to initialize\n   *      the implicit state in Studio, and an \"onChangeArgsToValue\" prop to\n   *      transform the event handler arguments into a value\n   */\n  componentHelpers?: ExternalComponentHelpers<P>;\n  /**\n   * An array describing the component actions to be used in Studio.\n   */\n  actions?: Action<P>[];\n  /**\n   * Whether style sections should be shown in Studio. For styles to work, the\n   * component must accept a `className` prop. If unset, defaults to all styles.\n   * Set to `false` if this component cannot be styled (for example, if it doesn't\n   * render any DOM elements).\n   */\n  styleSections?: StyleSection[] | boolean;\n  /**\n   * Whether the element can be repeated in Studio. If unset, defaults to true.\n   */\n  isRepeatable?: boolean;\n  /**\n   * The path to be used when importing the component in the generated code.\n   * It can be the name of the package that contains the component, or the path\n   * to the file in the project (relative to the root directory).\n   */\n  importPath: string;\n  /**\n   *  Whether the component is the default export from that path. Optional: if\n   * not specified, it's considered `false`.\n   */\n  isDefaultExport?: boolean;\n  /**\n   * The prop that expects the CSS classes with styles to be applied to the\n   * component. Optional: if not specified, Plasmic will expect it to be\n   * `className`. Notice that if the component does not accept CSS classes, the\n   * component will not be able to receive styles from the Studio.\n   */\n  classNameProp?: string;\n  /**\n   * The prop that receives and forwards a React `ref`. Plasmic only uses `ref`\n   * to interact with components, so it's not used in the generated code.\n   * Optional: If not provided, the usual `ref` is used.\n   */\n  refProp?: string;\n  /**\n   * Default styles to start with when instantiating the component in Plasmic.\n   */\n  defaultStyles?: CSSProperties;\n  /**\n   * Component templates to start with on Plasmic.\n   */\n  templates?: ComponentTemplates<P>;\n  /**\n   * Registered name of parent component, used for grouping related components.\n   */\n  parentComponentName?: string;\n  /**\n   * Whether the component can be used as an attachment to an element.\n   */\n  isAttachment?: boolean;\n  /**\n   * Whether the component provides data to its slots using DataProvider.\n   */\n  providesData?: boolean;\n\n  /**\n   * If specified, then Figma components with the specified names will be mapped\n   * to this component when you paste Figma content into Plasmic\n   */\n  figmaMappings?: {\n    figmaComponentName: string;\n  }[];\n\n  /**\n   * If true, when an instance of this component is added, the element\n   * will always be named by the name of this component.\n   */\n  alwaysAutoName?: boolean;\n\n  refActions?: Record<string, RefActionRegistration<P>>;\n}\n\n/**\n * @deprecated use CodeComponentMeta instead\n */\nexport type ComponentMeta<P> = CodeComponentMeta<P>;\n\nexport interface FunctionParam<P> {\n  name: string;\n  displayName?: string;\n  type: PropType<P>;\n}\n\nexport interface RefActionRegistration<P> {\n  displayName?: string;\n  description?: string;\n  argTypes: FunctionParam<P>[];\n}\n\nexport interface ComponentRegistration {\n  component: React.ComponentType<any>;\n  meta: CodeComponentMeta<any>;\n}\n\ndeclare global {\n  interface Window {\n    __PlasmicComponentRegistry: ComponentRegistration[];\n  }\n}\n\nif (root.__PlasmicComponentRegistry == null) {\n  root.__PlasmicComponentRegistry = [];\n}\n\nexport default function registerComponent<T extends React.ComponentType<any>>(\n  component: T,\n  meta: CodeComponentMeta<React.ComponentProps<T>>\n) {\n  // Check for duplicates\n  if (\n    root.__PlasmicComponentRegistry.some(\n      (r: ComponentRegistration) =>\n        r.component === component && r.meta.name === meta.name\n    )\n  ) {\n    return;\n  }\n  root.__PlasmicComponentRegistry.push({ component, meta });\n}\n"],"names":[],"mappings":";;;;;AAMA,IAAM,IAAI,GAAG,UAAiB,CAAC;AA8wB/B,IAAI,IAAI,CAAC,0BAA0B,IAAI,IAAI,EAAE;IAC3C,IAAI,CAAC,0BAA0B,GAAG,EAAE,CAAC;CACtC;SAEuB,iBAAiB,CACvC,SAAY,EACZ,IAAgD;;IAGhD,IACE,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAClC,UAAC,CAAwB;QACvB,OAAA,CAAC,CAAC,SAAS,KAAK,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;KAAA,CACzD,EACD;QACA,OAAO;KACR;IACD,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,WAAA,EAAE,IAAI,MAAA,EAAE,CAAC,CAAC;AAC5D;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../src/registerComponent.ts"],"sourcesContent":["import {\n  CodeComponentElement,\n  CSSProperties,\n  PlasmicElement,\n} from \"./element-types\";\nimport {\n  ContextDependentConfig,\n  InferDataType,\n  ModalProps,\n  PropType,\n  RestrictPropType,\n} from \"./prop-types\";\nexport type {\n  CanvasComponentProps,\n  ControlExtras,\n  ControlContext,\n  ContextDependentConfig,\n  PropType,\n} from \"./prop-types\";\n\nconst root = globalThis as any;\n\nexport interface ActionProps<P> {\n  componentProps: P;\n  /**\n   * `contextData` can be `null` if the prop controls are rendering before\n   * the component instance itself (it will re-render once the component\n   * calls `setControlContextData`)\n   */\n  contextData: InferDataType<P> | null;\n  studioOps: {\n    showModal: (\n      modalProps: Omit<ModalProps, \"onClose\"> & { onClose?: () => void }\n    ) => void;\n    refreshQueryData: () => void;\n    appendToSlot: (element: PlasmicElement, slotName: string) => void;\n    removeFromSlotAt: (pos: number, slotName: string) => void;\n    updateProps: (newValues: any) => void;\n  };\n  /**\n   * The document that the component will be rendered into; instead of using\n   * `document` directly (for, say, `document.querySelector()` etc.), you\n   * should use this instead.\n   */\n  studioDocument: typeof document;\n}\n\nexport type Action<P> =\n  | {\n      type: \"button-action\";\n      label: string;\n      onClick: (props: ActionProps<P>) => void;\n      hidden?: ContextDependentConfig<P, boolean>;\n    }\n  | {\n      type: \"custom-action\";\n      control: React.ComponentType<ActionProps<P>>;\n      hidden?: ContextDependentConfig<P, boolean>;\n    };\n\ntype DistributedKeyOf<T> = T extends any ? keyof T : never;\n\ninterface ComponentTemplate<P>\n  extends Omit<CodeComponentElement<P>, \"type\" | \"name\"> {\n  /**\n   * A preview picture for the template.\n   */\n  previewImg?: string;\n}\n\nexport interface ComponentTemplates<P> {\n  [name: string]: ComponentTemplate<P>;\n}\n\nexport type StateSpec = {\n  onChangeProp: string;\n} & (\n  | {\n      type: \"readonly\";\n      variableType: \"text\";\n      initVal?: string;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"number\";\n      initVal?: number;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"boolean\";\n      initVal?: boolean;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"array\";\n      initVal?: any[];\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"object\";\n      initVal?: object;\n    }\n  | {\n      type: \"writable\";\n      variableType: \"text\" | \"number\" | \"boolean\" | \"array\" | \"object\";\n      valueProp: string;\n    }\n);\n\nexport interface StateHelpers<P, T> {\n  initFunc?: ($props: P) => T;\n  onChangeArgsToValue?: (...args: any) => T;\n}\n\nexport type ComponentHelpers<P> = {\n  states: Record<string, StateHelpers<P, any>>;\n};\n\nexport type ExternalComponentHelpers<P> = {\n  helpers: ComponentHelpers<P>;\n  importPath: string;\n} & (\n  | {\n      importName: string;\n    }\n  | {\n      isDefaultExport: true;\n    }\n);\n\nexport type StyleSection =\n  | \"visibility\"\n  | \"typography\"\n  | \"sizing\"\n  | \"spacing\"\n  | \"background\"\n  | \"transform\"\n  | \"transitions\"\n  | \"layout\"\n  | \"overflow\"\n  | \"border\"\n  | \"shadows\"\n  | \"effects\";\n\nexport interface CodeComponentMeta<P> {\n  /**\n   * Any unique string name used to identify that component. Each component\n   * should be registered with a different `meta.name`, even if they have the\n   * same name in the code.\n   */\n  name: string;\n  /**\n   * The name to be displayed for the component in Studio. Optional: if not\n   * specified, `meta.name` is used.\n   */\n  displayName?: string;\n  /**\n   * The description of the component to be shown in Studio.\n   */\n  description?: string;\n  /**\n   * The javascript name to be used when generating code. Optional: if not\n   * provided, `meta.name` is used.\n   */\n  importName?: string;\n  /**\n   * An object describing the component properties to be used in Studio.\n   * For each `prop`, there should be an entry `meta.props[prop]` describing\n   * its type.\n   */\n  props: { [prop in DistributedKeyOf<P>]?: RestrictPropType<P[prop], P> } & {\n    [prop: string]: PropType<P>;\n  };\n  /**\n   * An object describing the component states to be used in Studio.\n   */\n  states?: Record<string, StateSpec>;\n  /**\n   * An object describing the components helpers to be used in Studio.\n   *   1. states helpers: Each state can receive an \"initFunc\" prop to initialize\n   *      the implicit state in Studio, and an \"onChangeArgsToValue\" prop to\n   *      transform the event handler arguments into a value\n   */\n  componentHelpers?: ExternalComponentHelpers<P>;\n  /**\n   * An array describing the component actions to be used in Studio.\n   */\n  actions?: Action<P>[];\n  /**\n   * Whether style sections should be shown in Studio. For styles to work, the\n   * component must accept a `className` prop. If unset, defaults to all styles.\n   * Set to `false` if this component cannot be styled (for example, if it doesn't\n   * render any DOM elements).\n   */\n  styleSections?: StyleSection[] | boolean;\n  /**\n   * Whether the element can be repeated in Studio. If unset, defaults to true.\n   */\n  isRepeatable?: boolean;\n  /**\n   * The path to be used when importing the component in the generated code.\n   * It can be the name of the package that contains the component, or the path\n   * to the file in the project (relative to the root directory).\n   */\n  importPath: string;\n  /**\n   *  Whether the component is the default export from that path. Optional: if\n   * not specified, it's considered `false`.\n   */\n  isDefaultExport?: boolean;\n  /**\n   * The prop that expects the CSS classes with styles to be applied to the\n   * component. Optional: if not specified, Plasmic will expect it to be\n   * `className`. Notice that if the component does not accept CSS classes, the\n   * component will not be able to receive styles from the Studio.\n   */\n  classNameProp?: string;\n  /**\n   * The prop that receives and forwards a React `ref`. Plasmic only uses `ref`\n   * to interact with components, so it's not used in the generated code.\n   * Optional: If not provided, the usual `ref` is used.\n   */\n  refProp?: string;\n  /**\n   * Default styles to start with when instantiating the component in Plasmic.\n   */\n  defaultStyles?: CSSProperties;\n  /**\n   * Component templates to start with on Plasmic.\n   */\n  templates?: ComponentTemplates<P>;\n  /**\n   * Registered name of parent component, used for grouping related components.\n   */\n  parentComponentName?: string;\n  /**\n   * Whether the component can be used as an attachment to an element.\n   */\n  isAttachment?: boolean;\n  /**\n   * Whether the component provides data to its slots using DataProvider.\n   */\n  providesData?: boolean;\n\n  /**\n   * If specified, then Figma components with the specified names will be mapped\n   * to this component when you paste Figma content into Plasmic\n   */\n  figmaMappings?: {\n    figmaComponentName: string;\n  }[];\n\n  /**\n   * If true, when an instance of this component is added, the element\n   * will always be named by the name of this component.\n   */\n  alwaysAutoName?: boolean;\n\n  refActions?: Record<string, RefActionRegistration<P>>;\n}\n\nexport type CodeComponentMode =\n  | \"advanced\"\n  | \"simplified\"\n  | \"database-schema-driven\";\n\n/**\n * @deprecated use CodeComponentMeta instead\n */\nexport type ComponentMeta<P> = CodeComponentMeta<P>;\n\nexport interface FunctionParam<P> {\n  name: string;\n  displayName?: string;\n  type: PropType<P>;\n}\n\nexport interface RefActionRegistration<P> {\n  displayName?: string;\n  description?: string;\n  argTypes: FunctionParam<P>[];\n}\n\nexport interface ComponentRegistration {\n  component: React.ComponentType<any>;\n  meta: CodeComponentMeta<any>;\n}\n\ndeclare global {\n  interface Window {\n    __PlasmicComponentRegistry: ComponentRegistration[];\n  }\n}\n\nif (root.__PlasmicComponentRegistry == null) {\n  root.__PlasmicComponentRegistry = [];\n}\n\nexport default function registerComponent<T extends React.ComponentType<any>>(\n  component: T,\n  meta: CodeComponentMeta<React.ComponentProps<T>>\n) {\n  // Check for duplicates\n  if (\n    root.__PlasmicComponentRegistry.some(\n      (r: ComponentRegistration) =>\n        r.component === component && r.meta.name === meta.name\n    )\n  ) {\n    return;\n  }\n  root.__PlasmicComponentRegistry.push({ component, meta });\n}\n"],"names":[],"mappings":";;;;;AAoBA,IAAM,IAAI,GAAG,UAAiB,CAAC;AAkR/B,IAAI,IAAI,CAAC,0BAA0B,IAAI,IAAI,EAAE;IAC3C,IAAI,CAAC,0BAA0B,GAAG,EAAE,CAAC;CACtC;SAEuB,iBAAiB,CACvC,SAAY,EACZ,IAAgD;;IAGhD,IACE,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAClC,UAAC,CAAwB;QACvB,OAAA,CAAC,CAAC,SAAS,KAAK,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;KAAA,CACzD,EACD;QACA,OAAO;KACR;IACD,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,WAAA,EAAE,IAAI,MAAA,EAAE,CAAC,CAAC;AAC5D;;;;"}

package/registerComponent/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./exports";

package/registerComponent/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../src/registerComponent.ts"],"sourcesContent":["import {\n  CodeComponentElement,\n  CSSProperties,\n  PlasmicElement,\n} from \"./element-types\";\n\nconst root = globalThis as any;\n\nexport interface CanvasComponentProps<Data = any> {\n  /**\n   * This prop is only provided within the canvas of Plasmic Studio.\n   * Allows the component to set data to be consumed by the props' controls.\n   */\n  setControlContextData?: (data: Data) => void;\n}\n\ntype InferDataType<P> = P extends CanvasComponentProps<infer Data> ? Data : any;\n\nexport type ControlExtras = { path: (string | number)[] };\n\n/**\n * Context that we pass back to control functions.\n */\nexport type ControlContext<P> = [\n  /**\n   * props\n   */\n  P,\n  /**\n   * `contextData` can be `null` if the prop controls are rendering before\n   * the component instance itself (it will re-render once the component\n   * calls `setControlContextData`)\n   */\n  InferDataType<P> | null,\n  /**\n   * Extra information for the control to use\n   */\n  ControlExtras\n];\n\n/**\n * Config option that takes the context (e.g., props) of the component instance\n * to dynamically set its value.\n */\nexport type ContextDependentConfig<P, R> = (...args: ControlContext<P>) => R;\n\nexport interface PropTypeBase<P> {\n  displayName?: string;\n  description?: string;\n  helpText?: string;\n  /**\n   * If the user has chosen to use a dynamic expression for this prop, provide\n   * a hint as to the expected values that the expression should evaluate to.\n   * This hint will be displayed alongside the code editor.  You may use\n   * markdown in the text here.\n   */\n  exprHint?: string;\n  /**\n   * Function for whether this prop should be hidden in the right panel,\n   * given the current props for this component\n   */\n  hidden?: ContextDependentConfig<P, boolean>;\n  readOnly?: boolean | ContextDependentConfig<P, boolean>;\n  /**\n   * If true, will hide the prop in a collapsed section; good for props that\n   * should not usually be used.\n   */\n  advanced?: boolean;\n  /**\n   * If true, does not allow the user to use a dynamic expression for this prop\n   */\n  disableDynamicValue?: boolean;\n  /**\n   * If set to true, the component will be remounted when the prop value is updated.\n   * (This behavior only appliees to canvas)\n   */\n  forceRemount?: boolean;\n}\n\nexport type DefaultValueOrExpr<P, T> =\n  | {\n      defaultExpr?: undefined;\n      defaultExprHint?: undefined;\n      defaultValue?: T;\n      defaultValueHint?: T | ContextDependentConfig<P, T | undefined>;\n    }\n  | {\n      defaultValue?: undefined;\n      defaultValueHint?: undefined;\n      defaultExpr?: string;\n      defaultExprHint?: string;\n    };\n\ntype StringTypeBase<P> = PropTypeBase<P> & DefaultValueOrExpr<P, string>;\n\nexport type StringType<P> =\n  | \"string\"\n  | ((\n      | {\n          type: \"string\";\n          control?: \"default\" | \"large\";\n        }\n      | {\n          type: \"code\";\n          lang: \"css\" | \"html\" | \"javascript\" | \"json\";\n        }\n      | {\n          type: \"richText\";\n        }\n      | {\n          type: \"color\";\n          /**\n           * If specified, and the user picks a color token in the Studio, then\n           * the value passed in as prop is a css variable reference, like\n           * `var(--TOKEN_ID)`, instead of the resolved hex value of the token.\n           * You should take care in using this in the proper css context --\n           * the css token is only defined if you are rendering under some\n           * Plasmic component in the DOM tree, which is usually the case,\n           * unless you are using a React portal.\n           */\n          keepCssVar?: boolean;\n        }\n      | {\n          type: \"class\";\n          /**\n           * Additional css selectors that can change how this style should look.\n           * Some examples:\n           *\n           * * `:hover` -- on hover\n           * * `[data-something=\"blah\"] -- when the element with this class has\n           *   an html attribute \"data-something=blah\"\n           * * :component[data-something=\"blah\"] :self -- when the root of the\n           *   component has an html attribute \"data-something=blah\". Note that\n           *   the non-standard `:component` selector is used to select the\n           *   component root, and the non-standard `:self` selector is used\n           *   to select the element that this class is attached to.\n           */\n          selectors?: {\n            /**\n             * A css selector, like `:hover` or `[data-something=\"blah\"]`.\n             */\n            selector: string;\n            /**\n             * An optional human-friendly label for the selector, so the studio user\n             * knows what this selector means.\n             */\n            label?: string;\n          }[];\n          /**\n           * If specified, then only shows these style sections for styling this class\n           */\n          styleSections?: StyleSection[];\n        }\n      | {\n          type: \"themeResetClass\";\n          /**\n           * Normally, theme reset class will only target Plasmic-generated tags\n           * with the default tag styles. If you also want to target non-Plasmic-generated\n           * tags (say, rendered by your code components, or fetched as an HTML blob\n           * from somewhere), then specify `true` here.\n           */\n          targetAllTags?: boolean;\n        }\n      | {\n          type: \"cardPicker\";\n          modalTitle?:\n            | React.ReactNode\n            | ContextDependentConfig<P, React.ReactNode>;\n          options:\n            | {\n                value: string;\n                label?: string;\n                imgUrl: string;\n                footer?: React.ReactNode;\n              }[]\n            | ContextDependentConfig<\n                P,\n                {\n                  value: string;\n                  label?: string;\n                  imgUrl: string;\n                  footer?: React.ReactNode;\n                }[]\n              >;\n          showInput?: boolean | ContextDependentConfig<P, boolean>;\n          onSearch?: ContextDependentConfig<\n            P,\n            ((value: string) => void) | undefined\n          >;\n        }\n    ) &\n      StringTypeBase<P>);\n\nexport type BooleanType<P> =\n  | \"boolean\"\n  | ({\n      type: \"boolean\";\n    } & DefaultValueOrExpr<P, boolean> &\n      PropTypeBase<P>);\n\ntype GraphQLValue = {\n  query: string;\n  variables?: Record<string, any>;\n};\n\nexport type GraphQLType<P> = {\n  type: \"code\";\n  lang: \"graphql\";\n  endpoint: string | ContextDependentConfig<P, string>;\n  method?: string | ContextDependentConfig<P, string>;\n  headers?: object | ContextDependentConfig<P, object>;\n} & DefaultValueOrExpr<P, GraphQLValue> &\n  PropTypeBase<P>;\n\ntype NumberTypeBase<P> = PropTypeBase<P> &\n  DefaultValueOrExpr<P, number> & {\n    type: \"number\";\n  };\n\nexport type NumberType<P> =\n  | \"number\"\n  | ((\n      | {\n          control?: \"default\";\n          min?: number | ContextDependentConfig<P, number>;\n          max?: number | ContextDependentConfig<P, number>;\n        }\n      | {\n          control: \"slider\";\n          min: number | ContextDependentConfig<P, number>;\n          max: number | ContextDependentConfig<P, number>;\n          step?: number | ContextDependentConfig<P, number>;\n        }\n    ) &\n      NumberTypeBase<P>);\n\n/**\n * Expects defaultValue to be a JSON-compatible value\n */\nexport type JSONLikeType<P> =\n  | \"object\"\n  | ({\n      type: \"object\";\n      fields?: {\n        [p: string]: PropType<P>;\n      };\n      /**\n       * Optional function that generates a name for this item in the array\n       */\n      nameFunc?: (item: any, ...args: ControlContext<P>) => string | undefined;\n    } & DefaultValueOrExpr<P, any> &\n      PropTypeBase<P>)\n  | ({\n      type: \"array\";\n      itemType?: {\n        type: \"object\";\n        fields: {\n          [p: string]: PropType<P>;\n        };\n        /**\n         * Optional function that generates a name for this item in the array\n         */\n        nameFunc?: (\n          item: any,\n          ...args: ControlContext<P>\n        ) => string | undefined;\n      };\n      /**\n       * Optional function that determines whether the user can delete a given item.\n       */\n      unstable__canDelete?: (item: any, ...args: ControlContext<P>) => boolean;\n      /**\n       * Specify how to let Plasmic know how to update its own internal representation of the data when the value has\n       * changed, or when issuing a minimalValue or shownValue that is different.\n       *\n       * Important to specify this if you are expecting any nested expression values in this data type!\n       */\n      unstable__keyFunc?: (item: any) => any;\n      /**\n       * Specify what would be the tentative new value that is set if the user makes any changes.\n       *\n       * Useful for field mappings.\n       *\n       * For instance, consider a Table where we have a `fields` prop:\n       *\n       * - Initially, the value is undefined. But if the user makes any changes, we would want to save an array of at\n       *   least three items (corresponding to, say, three columns inferred from a schema).\n       *\n       * - Let's say there are 5 columns in the value. The data schema changes, removing a column and adding two new\n       *   ones. Now we would want a different minimal value, containing 6 items.\n       */\n      unstable__minimalValue?: ContextDependentConfig<P, any>;\n    } & DefaultValueOrExpr<P, any[]> &\n      PropTypeBase<P>)\n  | ({\n      type: \"dataSource\";\n      dataSource: \"airtable\" | \"cms\";\n    } & PropTypeBase<P>);\n\ntype DataPickerValueType = string | number | (string | number)[];\n\nexport type DataPickerType<P> =\n  | ({\n      type: \"dataSelector\";\n      data:\n        | Record<string, any>\n        | ContextDependentConfig<P, Record<string, any>>;\n      alwaysShowValuePathAsLabel?: boolean;\n    } & DefaultValueOrExpr<P, DataPickerValueType> &\n      PropTypeBase<P>)\n  | ({\n      type: \"exprEditor\";\n      data:\n        | Record<string, any>\n        | ContextDependentConfig<P, Record<string, any>>;\n    } & DefaultValueOrExpr<P, DataPickerValueType> &\n      PropTypeBase<P>);\n\nexport type FormValidationRulesType<P> = {\n  type: \"formValidationRules\";\n} & DefaultValueOrExpr<P, any> &\n  PropTypeBase<P>;\n\nexport type EventHandlerType<P> = {\n  type: \"eventHandler\";\n  argTypes: { name: string; type: PropType<any> }[];\n} & DefaultValueOrExpr<P, (...args: any) => any> &\n  PropTypeBase<P>;\n\ninterface ChoiceTypeBase<P> extends PropTypeBase<P> {\n  type: \"choice\";\n  options:\n    | string[]\n    | {\n        label: string;\n        value: string | number | boolean;\n      }[]\n    | ContextDependentConfig<\n        P,\n        | string[]\n        | {\n            label: string;\n            value: string | number | boolean;\n          }[]\n      >;\n  allowSearch?: boolean;\n  filterOption?: boolean;\n  onSearch?: ContextDependentConfig<P, ((value: string) => void) | undefined>;\n}\n\nexport type ChoiceType<P> = (\n  | ({\n      multiSelect?: false;\n    } & DefaultValueOrExpr<P, string | number | boolean>)\n  | ({\n      multiSelect: true;\n    } & DefaultValueOrExpr<P, (string | number | boolean)[]>)\n  | ({\n      multiSelect: ContextDependentConfig<P, boolean>;\n    } & DefaultValueOrExpr<\n      P,\n      string | number | boolean | (string | number | boolean)[]\n    >)\n) &\n  ChoiceTypeBase<P>;\n\nexport interface ModalProps {\n  show?: boolean;\n  children?: React.ReactNode;\n  onClose: () => void;\n  style?: CSSProperties;\n}\n\ninterface CustomControlProps<P> {\n  componentProps: P;\n  /**\n   * `contextData` can be `null` if the prop controls are rendering before\n   * the component instance itself (it will re-render once the component\n   * calls `setControlContextData`)\n   */\n  contextData: InferDataType<P> | null;\n  value: any;\n  /**\n   * Sets the value to be passed to the prop. Expects a JSON-compatible value.\n   */\n  updateValue: (newVal: any) => void;\n  /**\n   * Full screen modal component\n   */\n  FullscreenModal: React.ComponentType<ModalProps>;\n  /**\n   * Modal component for the side pane\n   */\n  SideModal: React.ComponentType<ModalProps>;\n\n  /**\n   * The document that the component will be rendered into; instead of using\n   * `document` directly (for, say, `document.querySelector()` etc.), you\n   * should use this instead.\n   */\n  studioDocument: typeof document;\n}\nexport type CustomControl<P> = React.ComponentType<CustomControlProps<P>>;\n\n/**\n * Expects defaultValue to be a JSON-compatible value\n */\nexport type CustomType<P> =\n  | CustomControl<P>\n  | ({\n      type: \"custom\";\n      control: CustomControl<P>;\n    } & PropTypeBase<P> &\n      DefaultValueOrExpr<P, any>);\n\ntype SlotType<P> =\n  | \"slot\"\n  | ({\n      type: \"slot\";\n      /**\n       * The unique names of all code components that can be placed in the slot\n       */\n      allowedComponents?: string[];\n      /**\n       * Whether the \"empty slot\" placeholder should be hidden in the canvas.\n       */\n      hidePlaceholder?: boolean;\n      /**\n       * Whether the slot is repeated, i.e., is rendered multiple times using\n       * repeatedElement().\n       */\n      isRepeated?: boolean;\n\n      /**\n       * A nicer, human-readable display name for your slot prop\n       */\n      displayName?: string;\n\n      /**\n       * Function for whether this slot should be hidden from the left tree,\n       * given the current props for this component\n       */\n      hidden?: ContextDependentConfig<P, boolean>;\n\n      /**\n       * If slot is a render prop (accepts a function that takes in some\n       * arguments and returns some JSX), then specify the names of the\n       * arguments expected by the render prop function.\n       */\n      renderPropParams?: string[];\n\n      /**\n       * When inserting top-level \"page sections\", should this slot be the default target?\n       */\n      unstable__isMainContentSlot?: boolean;\n    } & Omit<\n      DefaultValueOrExpr<P, PlasmicElement | PlasmicElement[]>,\n      \"defaultValueHint\" | \"defaultExpr\" | \"defaultExprHint\"\n    >);\n\ntype ImageUrlType<P> =\n  | \"imageUrl\"\n  | ({\n      type: \"imageUrl\";\n    } & DefaultValueOrExpr<P, string> &\n      PropTypeBase<P>);\n\nexport type PrimitiveType<P = any> = Extract<\n  StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P>,\n  string\n>;\n\ntype ControlTypeBase =\n  | {\n      editOnly?: false;\n    }\n  | {\n      editOnly: true;\n      /**\n       * The prop where the values should be mapped to\n       */\n      uncontrolledProp?: string;\n    };\n\nexport type SupportControlled<T> =\n  | Extract<T, string | CustomControl<any>>\n  | (Exclude<T, string | CustomControl<any>> & ControlTypeBase);\n\nexport type PropType<P> =\n  | SupportControlled<\n      | StringType<P>\n      | BooleanType<P>\n      | NumberType<P>\n      | JSONLikeType<P>\n      | ChoiceType<P>\n      | ImageUrlType<P>\n      | CustomType<P>\n      | GraphQLType<P>\n      | DataPickerType<P>\n      | FormValidationRulesType<P>\n      | EventHandlerType<P>\n    >\n  | SlotType<P>;\n\ntype RestrictPropType<T, P> = T extends string\n  ? SupportControlled<\n      | StringType<P>\n      | ChoiceType<P>\n      | JSONLikeType<P>\n      | ImageUrlType<P>\n      | CustomType<P>\n      | DataPickerType<P>\n    >\n  : T extends boolean\n  ? SupportControlled<\n      BooleanType<P> | JSONLikeType<P> | CustomType<P> | DataPickerType<P>\n    >\n  : T extends number\n  ? SupportControlled<\n      NumberType<P> | JSONLikeType<P> | CustomType<P> | DataPickerType<P>\n    >\n  : PropType<P>;\n\nexport interface ActionProps<P> {\n  componentProps: P;\n  /**\n   * `contextData` can be `null` if the prop controls are rendering before\n   * the component instance itself (it will re-render once the component\n   * calls `setControlContextData`)\n   */\n  contextData: InferDataType<P> | null;\n  studioOps: {\n    showModal: (\n      modalProps: Omit<ModalProps, \"onClose\"> & { onClose?: () => void }\n    ) => void;\n    refreshQueryData: () => void;\n    appendToSlot: (element: PlasmicElement, slotName: string) => void;\n    removeFromSlotAt: (pos: number, slotName: string) => void;\n    updateProps: (newValues: any) => void;\n  };\n  /**\n   * The document that the component will be rendered into; instead of using\n   * `document` directly (for, say, `document.querySelector()` etc.), you\n   * should use this instead.\n   */\n  studioDocument: typeof document;\n}\n\nexport type Action<P> =\n  | {\n      type: \"button-action\";\n      label: string;\n      onClick: (props: ActionProps<P>) => void;\n    }\n  | {\n      type: \"custom-action\";\n      control: React.ComponentType<ActionProps<P>>;\n    };\n\ntype DistributedKeyOf<T> = T extends any ? keyof T : never;\n\ninterface ComponentTemplate<P>\n  extends Omit<CodeComponentElement<P>, \"type\" | \"name\"> {\n  /**\n   * A preview picture for the template.\n   */\n  previewImg?: string;\n}\n\nexport interface ComponentTemplates<P> {\n  [name: string]: ComponentTemplate<P>;\n}\n\nexport type StateSpec = {\n  onChangeProp: string;\n} & (\n  | {\n      type: \"readonly\";\n      variableType: \"text\";\n      initVal?: string;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"number\";\n      initVal?: number;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"boolean\";\n      initVal?: boolean;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"array\";\n      initVal?: any[];\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"object\";\n      initVal?: object;\n    }\n  | {\n      type: \"writable\";\n      variableType: \"text\" | \"number\" | \"boolean\" | \"array\" | \"object\";\n      valueProp: string;\n    }\n);\n\nexport interface StateHelpers<P, T> {\n  initFunc?: ($props: P) => T;\n  onChangeArgsToValue?: (...args: any) => T;\n}\n\nexport type ComponentHelpers<P> = {\n  states: Record<string, StateHelpers<P, any>>;\n};\n\nexport type ExternalComponentHelpers<P> = {\n  helpers: ComponentHelpers<P>;\n  importPath: string;\n} & (\n  | {\n      importName: string;\n    }\n  | {\n      isDefaultExport: true;\n    }\n);\n\nexport type StyleSection =\n  | \"visibility\"\n  | \"typography\"\n  | \"sizing\"\n  | \"spacing\"\n  | \"background\"\n  | \"transform\"\n  | \"transitions\"\n  | \"layout\"\n  | \"overflow\"\n  | \"border\"\n  | \"shadows\"\n  | \"effects\";\n\nexport interface CodeComponentMeta<P> {\n  /**\n   * Any unique string name used to identify that component. Each component\n   * should be registered with a different `meta.name`, even if they have the\n   * same name in the code.\n   */\n  name: string;\n  /**\n   * The name to be displayed for the component in Studio. Optional: if not\n   * specified, `meta.name` is used.\n   */\n  displayName?: string;\n  /**\n   * The description of the component to be shown in Studio.\n   */\n  description?: string;\n  /**\n   * The javascript name to be used when generating code. Optional: if not\n   * provided, `meta.name` is used.\n   */\n  importName?: string;\n  /**\n   * An object describing the component properties to be used in Studio.\n   * For each `prop`, there should be an entry `meta.props[prop]` describing\n   * its type.\n   */\n  props: { [prop in DistributedKeyOf<P>]?: RestrictPropType<P[prop], P> } & {\n    [prop: string]: PropType<P>;\n  };\n  /**\n   * An object describing the component states to be used in Studio.\n   */\n  states?: Record<string, StateSpec>;\n  /**\n   * An object describing the components helpers to be used in Studio.\n   *   1. states helpers: Each state can receive an \"initFunc\" prop to initialize\n   *      the implicit state in Studio, and an \"onChangeArgsToValue\" prop to\n   *      transform the event handler arguments into a value\n   */\n  componentHelpers?: ExternalComponentHelpers<P>;\n  /**\n   * An array describing the component actions to be used in Studio.\n   */\n  actions?: Action<P>[];\n  /**\n   * Whether style sections should be shown in Studio. For styles to work, the\n   * component must accept a `className` prop. If unset, defaults to all styles.\n   * Set to `false` if this component cannot be styled (for example, if it doesn't\n   * render any DOM elements).\n   */\n  styleSections?: StyleSection[] | boolean;\n  /**\n   * Whether the element can be repeated in Studio. If unset, defaults to true.\n   */\n  isRepeatable?: boolean;\n  /**\n   * The path to be used when importing the component in the generated code.\n   * It can be the name of the package that contains the component, or the path\n   * to the file in the project (relative to the root directory).\n   */\n  importPath: string;\n  /**\n   *  Whether the component is the default export from that path. Optional: if\n   * not specified, it's considered `false`.\n   */\n  isDefaultExport?: boolean;\n  /**\n   * The prop that expects the CSS classes with styles to be applied to the\n   * component. Optional: if not specified, Plasmic will expect it to be\n   * `className`. Notice that if the component does not accept CSS classes, the\n   * component will not be able to receive styles from the Studio.\n   */\n  classNameProp?: string;\n  /**\n   * The prop that receives and forwards a React `ref`. Plasmic only uses `ref`\n   * to interact with components, so it's not used in the generated code.\n   * Optional: If not provided, the usual `ref` is used.\n   */\n  refProp?: string;\n  /**\n   * Default styles to start with when instantiating the component in Plasmic.\n   */\n  defaultStyles?: CSSProperties;\n  /**\n   * Component templates to start with on Plasmic.\n   */\n  templates?: ComponentTemplates<P>;\n  /**\n   * Registered name of parent component, used for grouping related components.\n   */\n  parentComponentName?: string;\n  /**\n   * Whether the component can be used as an attachment to an element.\n   */\n  isAttachment?: boolean;\n  /**\n   * Whether the component provides data to its slots using DataProvider.\n   */\n  providesData?: boolean;\n\n  /**\n   * If specified, then Figma components with the specified names will be mapped\n   * to this component when you paste Figma content into Plasmic\n   */\n  figmaMappings?: {\n    figmaComponentName: string;\n  }[];\n\n  /**\n   * If true, when an instance of this component is added, the element\n   * will always be named by the name of this component.\n   */\n  alwaysAutoName?: boolean;\n\n  refActions?: Record<string, RefActionRegistration<P>>;\n}\n\n/**\n * @deprecated use CodeComponentMeta instead\n */\nexport type ComponentMeta<P> = CodeComponentMeta<P>;\n\nexport interface FunctionParam<P> {\n  name: string;\n  displayName?: string;\n  type: PropType<P>;\n}\n\nexport interface RefActionRegistration<P> {\n  displayName?: string;\n  description?: string;\n  argTypes: FunctionParam<P>[];\n}\n\nexport interface ComponentRegistration {\n  component: React.ComponentType<any>;\n  meta: CodeComponentMeta<any>;\n}\n\ndeclare global {\n  interface Window {\n    __PlasmicComponentRegistry: ComponentRegistration[];\n  }\n}\n\nif (root.__PlasmicComponentRegistry == null) {\n  root.__PlasmicComponentRegistry = [];\n}\n\nexport default function registerComponent<T extends React.ComponentType<any>>(\n  component: T,\n  meta: CodeComponentMeta<React.ComponentProps<T>>\n) {\n  // Check for duplicates\n  if (\n    root.__PlasmicComponentRegistry.some(\n      (r: ComponentRegistration) =>\n        r.component === component && r.meta.name === meta.name\n    )\n  ) {\n    return;\n  }\n  root.__PlasmicComponentRegistry.push({ component, meta });\n}\n"],"names":[],"mappings":";AAMA,IAAM,IAAI,GAAG,UAAiB,CAAC;AA8wB/B,IAAI,IAAI,CAAC,0BAA0B,IAAI,IAAI,EAAE;IAC3C,IAAI,CAAC,0BAA0B,GAAG,EAAE,CAAC;CACtC;SAEuB,iBAAiB,CACvC,SAAY,EACZ,IAAgD;;IAGhD,IACE,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAClC,UAAC,CAAwB;QACvB,OAAA,CAAC,CAAC,SAAS,KAAK,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;KAAA,CACzD,EACD;QACA,OAAO;KACR;IACD,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,WAAA,EAAE,IAAI,MAAA,EAAE,CAAC,CAAC;AAC5D;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../../src/registerComponent.ts"],"sourcesContent":["import {\n  CodeComponentElement,\n  CSSProperties,\n  PlasmicElement,\n} from \"./element-types\";\nimport {\n  ContextDependentConfig,\n  InferDataType,\n  ModalProps,\n  PropType,\n  RestrictPropType,\n} from \"./prop-types\";\nexport type {\n  CanvasComponentProps,\n  ControlExtras,\n  ControlContext,\n  ContextDependentConfig,\n  PropType,\n} from \"./prop-types\";\n\nconst root = globalThis as any;\n\nexport interface ActionProps<P> {\n  componentProps: P;\n  /**\n   * `contextData` can be `null` if the prop controls are rendering before\n   * the component instance itself (it will re-render once the component\n   * calls `setControlContextData`)\n   */\n  contextData: InferDataType<P> | null;\n  studioOps: {\n    showModal: (\n      modalProps: Omit<ModalProps, \"onClose\"> & { onClose?: () => void }\n    ) => void;\n    refreshQueryData: () => void;\n    appendToSlot: (element: PlasmicElement, slotName: string) => void;\n    removeFromSlotAt: (pos: number, slotName: string) => void;\n    updateProps: (newValues: any) => void;\n  };\n  /**\n   * The document that the component will be rendered into; instead of using\n   * `document` directly (for, say, `document.querySelector()` etc.), you\n   * should use this instead.\n   */\n  studioDocument: typeof document;\n}\n\nexport type Action<P> =\n  | {\n      type: \"button-action\";\n      label: string;\n      onClick: (props: ActionProps<P>) => void;\n      hidden?: ContextDependentConfig<P, boolean>;\n    }\n  | {\n      type: \"custom-action\";\n      control: React.ComponentType<ActionProps<P>>;\n      hidden?: ContextDependentConfig<P, boolean>;\n    };\n\ntype DistributedKeyOf<T> = T extends any ? keyof T : never;\n\ninterface ComponentTemplate<P>\n  extends Omit<CodeComponentElement<P>, \"type\" | \"name\"> {\n  /**\n   * A preview picture for the template.\n   */\n  previewImg?: string;\n}\n\nexport interface ComponentTemplates<P> {\n  [name: string]: ComponentTemplate<P>;\n}\n\nexport type StateSpec = {\n  onChangeProp: string;\n} & (\n  | {\n      type: \"readonly\";\n      variableType: \"text\";\n      initVal?: string;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"number\";\n      initVal?: number;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"boolean\";\n      initVal?: boolean;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"array\";\n      initVal?: any[];\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"object\";\n      initVal?: object;\n    }\n  | {\n      type: \"writable\";\n      variableType: \"text\" | \"number\" | \"boolean\" | \"array\" | \"object\";\n      valueProp: string;\n    }\n);\n\nexport interface StateHelpers<P, T> {\n  initFunc?: ($props: P) => T;\n  onChangeArgsToValue?: (...args: any) => T;\n}\n\nexport type ComponentHelpers<P> = {\n  states: Record<string, StateHelpers<P, any>>;\n};\n\nexport type ExternalComponentHelpers<P> = {\n  helpers: ComponentHelpers<P>;\n  importPath: string;\n} & (\n  | {\n      importName: string;\n    }\n  | {\n      isDefaultExport: true;\n    }\n);\n\nexport type StyleSection =\n  | \"visibility\"\n  | \"typography\"\n  | \"sizing\"\n  | \"spacing\"\n  | \"background\"\n  | \"transform\"\n  | \"transitions\"\n  | \"layout\"\n  | \"overflow\"\n  | \"border\"\n  | \"shadows\"\n  | \"effects\";\n\nexport interface CodeComponentMeta<P> {\n  /**\n   * Any unique string name used to identify that component. Each component\n   * should be registered with a different `meta.name`, even if they have the\n   * same name in the code.\n   */\n  name: string;\n  /**\n   * The name to be displayed for the component in Studio. Optional: if not\n   * specified, `meta.name` is used.\n   */\n  displayName?: string;\n  /**\n   * The description of the component to be shown in Studio.\n   */\n  description?: string;\n  /**\n   * The javascript name to be used when generating code. Optional: if not\n   * provided, `meta.name` is used.\n   */\n  importName?: string;\n  /**\n   * An object describing the component properties to be used in Studio.\n   * For each `prop`, there should be an entry `meta.props[prop]` describing\n   * its type.\n   */\n  props: { [prop in DistributedKeyOf<P>]?: RestrictPropType<P[prop], P> } & {\n    [prop: string]: PropType<P>;\n  };\n  /**\n   * An object describing the component states to be used in Studio.\n   */\n  states?: Record<string, StateSpec>;\n  /**\n   * An object describing the components helpers to be used in Studio.\n   *   1. states helpers: Each state can receive an \"initFunc\" prop to initialize\n   *      the implicit state in Studio, and an \"onChangeArgsToValue\" prop to\n   *      transform the event handler arguments into a value\n   */\n  componentHelpers?: ExternalComponentHelpers<P>;\n  /**\n   * An array describing the component actions to be used in Studio.\n   */\n  actions?: Action<P>[];\n  /**\n   * Whether style sections should be shown in Studio. For styles to work, the\n   * component must accept a `className` prop. If unset, defaults to all styles.\n   * Set to `false` if this component cannot be styled (for example, if it doesn't\n   * render any DOM elements).\n   */\n  styleSections?: StyleSection[] | boolean;\n  /**\n   * Whether the element can be repeated in Studio. If unset, defaults to true.\n   */\n  isRepeatable?: boolean;\n  /**\n   * The path to be used when importing the component in the generated code.\n   * It can be the name of the package that contains the component, or the path\n   * to the file in the project (relative to the root directory).\n   */\n  importPath: string;\n  /**\n   *  Whether the component is the default export from that path. Optional: if\n   * not specified, it's considered `false`.\n   */\n  isDefaultExport?: boolean;\n  /**\n   * The prop that expects the CSS classes with styles to be applied to the\n   * component. Optional: if not specified, Plasmic will expect it to be\n   * `className`. Notice that if the component does not accept CSS classes, the\n   * component will not be able to receive styles from the Studio.\n   */\n  classNameProp?: string;\n  /**\n   * The prop that receives and forwards a React `ref`. Plasmic only uses `ref`\n   * to interact with components, so it's not used in the generated code.\n   * Optional: If not provided, the usual `ref` is used.\n   */\n  refProp?: string;\n  /**\n   * Default styles to start with when instantiating the component in Plasmic.\n   */\n  defaultStyles?: CSSProperties;\n  /**\n   * Component templates to start with on Plasmic.\n   */\n  templates?: ComponentTemplates<P>;\n  /**\n   * Registered name of parent component, used for grouping related components.\n   */\n  parentComponentName?: string;\n  /**\n   * Whether the component can be used as an attachment to an element.\n   */\n  isAttachment?: boolean;\n  /**\n   * Whether the component provides data to its slots using DataProvider.\n   */\n  providesData?: boolean;\n\n  /**\n   * If specified, then Figma components with the specified names will be mapped\n   * to this component when you paste Figma content into Plasmic\n   */\n  figmaMappings?: {\n    figmaComponentName: string;\n  }[];\n\n  /**\n   * If true, when an instance of this component is added, the element\n   * will always be named by the name of this component.\n   */\n  alwaysAutoName?: boolean;\n\n  refActions?: Record<string, RefActionRegistration<P>>;\n}\n\nexport type CodeComponentMode =\n  | \"advanced\"\n  | \"simplified\"\n  | \"database-schema-driven\";\n\n/**\n * @deprecated use CodeComponentMeta instead\n */\nexport type ComponentMeta<P> = CodeComponentMeta<P>;\n\nexport interface FunctionParam<P> {\n  name: string;\n  displayName?: string;\n  type: PropType<P>;\n}\n\nexport interface RefActionRegistration<P> {\n  displayName?: string;\n  description?: string;\n  argTypes: FunctionParam<P>[];\n}\n\nexport interface ComponentRegistration {\n  component: React.ComponentType<any>;\n  meta: CodeComponentMeta<any>;\n}\n\ndeclare global {\n  interface Window {\n    __PlasmicComponentRegistry: ComponentRegistration[];\n  }\n}\n\nif (root.__PlasmicComponentRegistry == null) {\n  root.__PlasmicComponentRegistry = [];\n}\n\nexport default function registerComponent<T extends React.ComponentType<any>>(\n  component: T,\n  meta: CodeComponentMeta<React.ComponentProps<T>>\n) {\n  // Check for duplicates\n  if (\n    root.__PlasmicComponentRegistry.some(\n      (r: ComponentRegistration) =>\n        r.component === component && r.meta.name === meta.name\n    )\n  ) {\n    return;\n  }\n  root.__PlasmicComponentRegistry.push({ component, meta });\n}\n"],"names":[],"mappings":";AAoBA,IAAM,IAAI,GAAG,UAAiB,CAAC;AAkR/B,IAAI,IAAI,CAAC,0BAA0B,IAAI,IAAI,EAAE;IAC3C,IAAI,CAAC,0BAA0B,GAAG,EAAE,CAAC;CACtC;SAEuB,iBAAiB,CACvC,SAAY,EACZ,IAAgD;;IAGhD,IACE,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAClC,UAAC,CAAwB;QACvB,OAAA,CAAC,CAAC,SAAS,KAAK,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;KAAA,CACzD,EACD;QACA,OAAO;KACR;IACD,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,WAAA,EAAE,IAAI,MAAA,EAAE,CAAC,CAAC;AAC5D;;;;"}

package/registerComponent/dist/lang-utils.d.ts

@@ -0,0 +1,3 @@
+type StringGen = string | (() => string);
+export declare function ensure<T>(x: T | null | undefined, msg?: StringGen): T;
+export {};

package/registerComponent/dist/prop-types.d.ts

@@ -0,0 +1,387 @@
+/// <reference types="react" />
+import { CSSProperties, PlasmicElement } from "./element-types";
+import { StyleSection } from "./registerComponent";
+export interface CanvasComponentProps<Data = any> {
+    /**
+     * This prop is only provided within the canvas of Plasmic Studio.
+     * Allows the component to set data to be consumed by the props' controls.
+     */
+    setControlContextData?: (data: Data) => void;
+}
+export type ControlExtras = {
+    path: (string | number)[];
+};
+export type InferDataType<P> = P extends CanvasComponentProps<infer Data> ? Data : any;
+/**
+ * Context that we pass back to control functions.
+ */
+export type ControlContext<P> = [
+    /**
+     * props
+     */
+    P,
+    /**
+     * `contextData` can be `null` if the prop controls are rendering before
+     * the component instance itself (it will re-render once the component
+     * calls `setControlContextData`)
+     */
+    InferDataType<P> | null,
+    /**
+     * Extra information for the control to use
+     */
+    ControlExtras
+];
+/**
+ * Config option that takes the context (e.g., props) of the component instance
+ * to dynamically set its value.
+ */
+export type ContextDependentConfig<P, R> = (...args: ControlContext<P>) => R;
+export interface PropTypeBase<P> {
+    displayName?: string;
+    description?: string;
+    helpText?: string;
+    /**
+     * If the user has chosen to use a dynamic expression for this prop, provide
+     * a hint as to the expected values that the expression should evaluate to.
+     * This hint will be displayed alongside the code editor.  You may use
+     * markdown in the text here.
+     */
+    exprHint?: string;
+    /**
+     * Function for whether this prop should be hidden in the right panel,
+     * given the current props for this component
+     */
+    hidden?: ContextDependentConfig<P, boolean>;
+    readOnly?: boolean | ContextDependentConfig<P, boolean>;
+    /**
+     * If true, will hide the prop in a collapsed section; good for props that
+     * should not usually be used.
+     */
+    advanced?: boolean;
+    /**
+     * If true, does not allow the user to use a dynamic expression for this prop
+     */
+    disableDynamicValue?: boolean;
+    /**
+     * If set to true, the component will be remounted when the prop value is updated.
+     * (This behavior only applies to canvas)
+     */
+    forceRemount?: boolean;
+}
+interface Defaultable<P, T> {
+    /**
+     * Default value to set for this prop when the component is instantiated
+     */
+    defaultValue?: T;
+    /**
+     * If no prop is given, the component uses a default; specify whaat
+     * that default is so the Plasmic user can see it in the studio UI
+     */
+    defaultValueHint?: T | ContextDependentConfig<P, T | undefined>;
+    /**
+     * Use a dynamic value expression as the default instead
+     */
+    defaultExpr?: string;
+    defaultExprHint?: string;
+}
+interface Controllable {
+    /**
+     * If true, this is a prop that should only be used inside Plasmic
+     * Studio for rendering artboards; will not be actually used in
+     * generated code.
+     */
+    editOnly?: boolean;
+    /**
+     * If specified, the value used for this prop will instead be
+     * mapped to the uncontrolledProp when generating code. This is
+     * useful if, for example, in the artboard, you want to use `value`
+     * prop to control the component, but in generated code, you want to
+     * map it to `defaultValue`.
+     */
+    uncontrolledProp?: string;
+}
+interface PropTypeBaseDefault<P, T> extends PropTypeBase<P>, Defaultable<P, T>, Controllable {
+}
+interface PlainStringType<P> extends PropTypeBaseDefault<P, string> {
+    type: "string";
+    control?: "default" | "large";
+}
+interface CodeStringType<P> extends PropTypeBaseDefault<P, string> {
+    type: "code";
+    lang: "css" | "html" | "javascript" | "json";
+}
+interface RichTextType<P> extends PropTypeBaseDefault<P, string> {
+    type: "richText";
+}
+interface ColorType<P> extends PropTypeBaseDefault<P, string> {
+    type: "color";
+    /**
+     * If specified, and the user picks a color token in the Studio, then
+     * the value passed in as prop is a css variable reference, like
+     * `var(--TOKEN_ID)`, instead of the resolved hex value of the token.
+     * You should take care in using this in the proper css context --
+     * the css token is only defined if you are rendering under some
+     * Plasmic component in the DOM tree, which is usually the case,
+     * unless you are using a React portal.
+     */
+    keepCssVar?: boolean;
+}
+interface ClassType<P> extends PropTypeBase<P> {
+    type: "class";
+    /**
+     * Additional css selectors that can change how this style should look.
+     * Some examples:
+     *
+     * * `:hover` -- on hover
+     * * `[data-something="blah"] -- when the element with this class has
+     *   an html attribute "data-something=blah"
+     * * :component[data-something="blah"] :self -- when the root of the
+     *   component has an html attribute "data-something=blah". Note that
+     *   the non-standard `:component` selector is used to select the
+     *   component root, and the non-standard `:self` selector is used
+     *   to select the element that this class is attached to.
+     */
+    selectors?: {
+        /**
+         * A css selector, like `:hover` or `[data-something="blah"]`.
+         */
+        selector: string;
+        /**
+         * An optional human-friendly label for the selector, so the studio user
+         * knows what this selector means.
+         */
+        label?: string;
+    }[];
+    /**
+     * If specified, then only shows these style sections for styling this class
+     */
+    styleSections?: StyleSection[];
+}
+interface ThemeResetClassType<P> extends PropTypeBase<P> {
+    type: "themeResetClass";
+    /**
+     * Normally, theme reset class will only target Plasmic-generated tags
+     * with the default tag styles. If you also want to target non-Plasmic-generated
+     * tags (say, rendered by your code components, or fetched as an HTML blob
+     * from somewhere), then specify `true` here.
+     */
+    targetAllTags?: boolean;
+}
+interface CardPickerType<P> extends PropTypeBaseDefault<P, string> {
+    type: "cardPicker";
+    modalTitle?: React.ReactNode | ContextDependentConfig<P, React.ReactNode>;
+    options: {
+        value: string;
+        label?: string;
+        imgUrl: string;
+        footer?: React.ReactNode;
+    }[] | ContextDependentConfig<P, {
+        value: string;
+        label?: string;
+        imgUrl: string;
+        footer?: React.ReactNode;
+    }[]>;
+    showInput?: boolean | ContextDependentConfig<P, boolean>;
+    onSearch?: ContextDependentConfig<P, ((value: string) => void) | undefined>;
+}
+type RichStringType<P> = PlainStringType<P> | CodeStringType<P> | RichTextType<P> | ColorType<P> | ClassType<P> | ThemeResetClassType<P> | CardPickerType<P>;
+export type StringType<P> = "string" | RichStringType<P>;
+interface RichBooleanType<P> extends PropTypeBaseDefault<P, boolean> {
+    type: "boolean";
+}
+export type BooleanType<P> = "boolean" | RichBooleanType<P>;
+type GraphQLValue = {
+    query: string;
+    variables?: Record<string, any>;
+};
+interface GraphQLType<P> extends PropTypeBaseDefault<P, GraphQLValue> {
+    type: "code";
+    lang: "graphql";
+    endpoint: string | ContextDependentConfig<P, string>;
+    method?: string | ContextDependentConfig<P, string>;
+    headers?: object | ContextDependentConfig<P, object>;
+}
+interface NumberTypeBase<P> extends PropTypeBaseDefault<P, number> {
+    type: "number";
+    min?: number | ContextDependentConfig<P, number>;
+    max?: number | ContextDependentConfig<P, number>;
+}
+interface PlainNumberType<P> extends NumberTypeBase<P> {
+    control?: "default";
+}
+interface SliderNumberType<P> extends NumberTypeBase<P> {
+    control: "slider";
+    step?: number | ContextDependentConfig<P, number>;
+}
+type RichNumberType<P> = PlainNumberType<P> | SliderNumberType<P>;
+export type NumberType<P> = "number" | RichNumberType<P>;
+interface ObjectType<P> extends PropTypeBaseDefault<P, Record<string, any>> {
+    type: "object";
+    fields?: Record<string, PropType<P>>;
+    nameFunc?: (item: any, ...args: ControlContext<P>) => string | undefined;
+}
+interface ArrayType<P> extends PropTypeBaseDefault<P, any[]> {
+    type: "array";
+    itemType?: ObjectType<P>;
+    /**
+     * Optional function that determines whether the user can delete a given item.
+     */
+    unstable__canDelete?: (item: any, ...args: ControlContext<P>) => boolean;
+    /**
+     * Specify how to let Plasmic know how to update its own internal representation of the data when the value has
+     * changed, or when issuing a minimalValue or shownValue that is different.
+     *
+     * Important to specify this if you are expecting any nested expression values in this data type!
+     */
+    unstable__keyFunc?: (item: any) => any;
+    /**
+     * Specify what would be the tentative new value that is set if the user makes any changes.
+     *
+     * Useful for field mappings.
+     *
+     * For instance, consider a Table where we have a `fields` prop:
+     *
+     * - Initially, the value is undefined. But if the user makes any changes, we would want to save an array of at
+     *   least three items (corresponding to, say, three columns inferred from a schema).
+     *
+     * - Let's say there are 5 columns in the value. The data schema changes, removing a column and adding two new
+     *   ones. Now we would want a different minimal value, containing 6 items.
+     */
+    unstable__minimalValue?: ContextDependentConfig<P, any>;
+}
+export type JSONLikeType<P> = "object" | ObjectType<P> | ArrayType<P>;
+export interface DataSourceType<P> extends PropTypeBase<P> {
+    type: "dataSource";
+    dataSource: "airtable" | "cms";
+}
+type DataPickerValueType = string | number | (string | number)[];
+interface DataPickerType<P> extends PropTypeBaseDefault<P, DataPickerValueType> {
+    type: "dataSelector";
+    data: Record<string, any> | ContextDependentConfig<P, Record<string, any>>;
+    alwaysShowValuePathAsLabel?: boolean;
+}
+interface ExprEditorType<P> extends PropTypeBaseDefault<P, DataPickerValueType> {
+    type: "exprEditor";
+    data: Record<string, any> | ContextDependentConfig<P, Record<string, any>>;
+}
+interface FormValidationRulesType<P> extends PropTypeBaseDefault<P, any> {
+    type: "formValidationRules";
+}
+interface EventHandlerType<P> extends PropTypeBase<P> {
+    type: "eventHandler";
+    argTypes: {
+        name: string;
+        type: PropType<any>;
+    }[];
+}
+interface ChoiceTypeBase<P, T> extends PropTypeBaseDefault<P, T> {
+    type: "choice";
+    options: string[] | {
+        label: string;
+        value: string | number | boolean;
+    }[] | ContextDependentConfig<P, string[] | {
+        label: string;
+        value: string | number | boolean;
+    }[]>;
+    allowSearch?: boolean;
+    filterOption?: boolean;
+    onSearch?: ContextDependentConfig<P, ((value: string) => void) | undefined>;
+}
+interface SingleChoiceType<P> extends ChoiceTypeBase<P, string | number | boolean> {
+    multiSelect?: false;
+}
+interface MultiChoiceType<P> extends ChoiceTypeBase<P, (string | number | boolean)[]> {
+    multiSelect: true;
+}
+interface CustomChoiceType<P> extends ChoiceTypeBase<P, string | number | boolean | (string | number | boolean)[]> {
+    multiSelect: ContextDependentConfig<P, boolean>;
+}
+export type ChoiceType<P> = SingleChoiceType<P> | MultiChoiceType<P> | CustomChoiceType<P>;
+interface RichSlotType<P> {
+    type: "slot";
+    /**
+     * The unique names of all code components that can be placed in the slot
+     */
+    allowedComponents?: string[];
+    /**
+     * Whether the "empty slot" placeholder should be hidden in the canvas.
+     */
+    hidePlaceholder?: boolean;
+    /**
+     * Whether the slot is repeated, i.e., is rendered multiple times using
+     * repeatedElement().
+     */
+    isRepeated?: boolean;
+    /**
+     * A nicer, human-readable display name for your slot prop
+     */
+    displayName?: string;
+    /**
+     * Function for whether this slot should be hidden from the left tree,
+     * given the current props for this component
+     */
+    hidden?: ContextDependentConfig<P, boolean>;
+    /**
+     * If slot is a render prop (accepts a function that takes in some
+     * arguments and returns some JSX), then specify the names of the
+     * arguments expected by the render prop function.
+     */
+    renderPropParams?: string[];
+    /**
+     * When inserting top-level "page sections", should this slot be the default target?
+     */
+    unstable__isMainContentSlot?: boolean;
+    defaultValue?: PlasmicElement | PlasmicElement[];
+}
+type SlotType<P> = "slot" | RichSlotType<P>;
+interface RichImageUrlType<P> extends PropTypeBaseDefault<P, string> {
+    type: "imageUrl";
+}
+type ImageUrlType<P> = "imageUrl" | RichImageUrlType<P>;
+export interface ModalProps {
+    show?: boolean;
+    children?: React.ReactNode;
+    onClose: () => void;
+    style?: CSSProperties;
+}
+interface CustomControlProps<P> {
+    componentProps: P;
+    /**
+     * `contextData` can be `null` if the prop controls are rendering before
+     * the component instance itself (it will re-render once the component
+     * calls `setControlContextData`)
+     */
+    contextData: InferDataType<P> | null;
+    value: any;
+    /**
+     * Sets the value to be passed to the prop. Expects a JSON-compatible value.
+     */
+    updateValue: (newVal: any) => void;
+    /**
+     * Full screen modal component
+     */
+    FullscreenModal: React.ComponentType<ModalProps>;
+    /**
+     * Modal component for the side pane
+     */
+    SideModal: React.ComponentType<ModalProps>;
+    /**
+     * The document that the component will be rendered into; instead of using
+     * `document` directly (for, say, `document.querySelector()` etc.), you
+     * should use this instead.
+     */
+    studioDocument: typeof document;
+}
+type CustomControl<P> = React.ComponentType<CustomControlProps<P>>;
+interface RichCustomType<P> extends PropTypeBaseDefault<P, any> {
+    type: "custom";
+    control: CustomControl<P>;
+}
+export type CustomType<P> = RichCustomType<P> | CustomControl<P>;
+export type PrimitiveType<P = any> = Extract<StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P>, string>;
+export type PropType<P> = StringType<P> | BooleanType<P> | GraphQLType<P> | NumberType<P> | JSONLikeType<P> | DataSourceType<P> | DataPickerType<P> | ExprEditorType<P> | FormValidationRulesType<P> | EventHandlerType<P> | ChoiceType<P> | CustomType<P> | ImageUrlType<P> | SlotType<P>;
+type StringCompatType<P> = StringType<P> | ChoiceType<P> | JSONLikeType<P> | ImageUrlType<P> | CustomType<P> | DataPickerType<P>;
+type BoolCompatType<P> = BooleanType<P> | CustomType<P> | DataPickerType<P>;
+type NumberCompatType<P> = NumberType<P> | CustomType<P> | DataPickerType<P>;
+export type RestrictPropType<T, P> = T extends string ? StringCompatType<P> : T extends boolean ? BoolCompatType<P> : T extends number ? NumberCompatType<P> : PropType<P>;
+export {};